css - 自定义复选框外观与标签的排列方式与文本输入的排列方式不同

Question

我正在尝试在表单中自定义样式复选框，-webkit-appearance: none;以便完全控制。

问题是我似乎无法让它与其他文本字段一样的标签对齐，即使它具有相同的高度、边距、填充等。它看起来像这样：

JSFiddle 示例在这里

那么为什么复选框不像文本字段那样对齐呢？该复选框似乎将其底部与标签对齐，其中文本字段的中间与标签对齐。

相关CSS：

label {
    display: inline-block;
    width: 80px;
    height: 34px;
}

input[type=text], input[type=checkbox] {
    -webkit-appearance: none;
    border: 1px solid red;
    width: 200px;
    height: 34px;
    margin: 0;
    padding: 0;
}

input[type=checkbox] {
    width: 34px; /* make it square */
}

input[type=checkbox]:checked {
    background: green;
}

Answer 1

添加：vertical-align: middle;到您的复选框样式。这是一个调整过的小提琴。

另外，请记住样式复选框不是很兼容跨浏览器。Firefox 不允许您轻松重置外观。您可以添加-moz-appearance: none，但这不会消除所有内容。您最好设计一个标签来切换复选框并隐藏实际的输入元素。