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