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

Question

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

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

JSFiddle Example here

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

相关 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; 到您的复选框样式。这是 an adjusted fiddle .

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