jquery - カスタムCSSチェックボックスでタブが機能しない

Question

フォーム入力フィールドをタブで移動し始めると、次のコードを持つカスタム CSS チェックボックスがスキップされることに気付きました。

.voucher_form input[type="text"],
.voucher_form input[type="email"]{
.box-sizing;
border-radius:14px;
background-color:#fff;
padding:6px 5px;
width:inherit;
border:0;
-moz-box-shadow:inset -1px 1px 3px #888;
-webkit-box-shadow:inset -1px 1px 3px #888;
box-shadow:inset -1px 1px 3px #888;
margin-top:6px;
font-size:16px;
color:#6f6f6f;
}

.voucher_form input[type="checkbox"]{
padding:0;
}

.voucher_form  input[type="checkbox"] {
display:none;
}

.voucher_form  input[type="checkbox"] + label span{
display:inline-block;
width:20px;
height:20px;
margin:-2px 4px 0 0;
vertical-align:middle;
cursor:pointer;
}

.voucher_form  input[type="checkbox"] + label span{
background:url("../image/radio.png") 0 0 no-repeat;
}

.voucher_form  input[type="checkbox"]:checked + label span {
background:url("../image/radio.png") 0 -20px no-repeat;
}

次のように「display:none」に設定されているためでしょうか?

 .voucher_form  input[type="checkbox"] {
   display:none;
 }

もしそうなら、この問題を解決する方法はありますか?