自定義複選框外觀排列與標籤不同文本輸入

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，但是這不會消除所有內容。設計一個標籤來切換複選框並隱藏實際的輸入元素可能會更好。