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

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

将<{1}}添加到您的复选框样式中。这是an adjusted fiddle。

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