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

我正在尝试使用

-webkit外观：none这样我就可以完全控制了

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


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


相关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;
}

添加：
垂直对齐：中间对齐到您的复选框样式。给你

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