そこにある派手なチェックボックスソリューションの多くには、入力フォーカスを受け取らないように元の入力チェックボックスを削除するという欠陥があります。
これは、次の2つの理由で受け入れられません。
Tab-keyキーボード（およびspacebar）を使用してチェックボックスに移動し、その値を変更することはできません。- チェックボックスにホバースタイルとフォーカススタイルを適用することはできません。
@konsumerによる上記の解決策は素晴らしいですが、入力フォーカス機能が不足しています。しかし
、入力フォーカスが機能する@geoffrey_crofteによる
実装に出くわしました。しかし、それはおそらく@konsumersほど派手ではありません
だから..私はそれらの2つを組み合わせて、プランカーの例を出しました。このソリューションの唯一の欠点は、これを機能させるために特定のhtmlマークアップを使用する必要があることです。
<input type="checkbox" class="fancy-check" id="myId"/>
<label for="myId" ><span>The label text</span></label>
チェックボックスの後にはラベルタグが続く必要があります。タグには、ラベルテキストを含むタグをlabel含めることができます。span
fancy-checkまた、適用する新しいスタイルにクラスを使用することを要件にしました。labelこれは、必要な次のタグが欠落しているページ内の他のチェックボックスをスタイルが破壊しないようにするためです。
この例は、アイコンフォントの使用に基づいています。この場合、FontAwesomeライブラリが必要です。
スタイルシートはここにあります：
/*Move he original checkbox out of the way */
[type="checkbox"].fancy-check {
position: absolute;
left: -9999px;
}
/*Align the icon and the label text to same height using tabl-cell display*/
/*If you change the font-size of the text, you may also want to do som padding or alignhment changes here*/
.fancy-check ~ label > span {
display: table-cell;
vertical-align: middle;
padding-left: 5px;
}
/*The label will contain the icon and the text, will grab the focus*/
[type="checkbox"].fancy-check + label {
cursor: pointer;
display: table;
}
/*The icon container, set it to fixed size and font size, the padding is to align the border*/
/*If you change the font-size of this icon, be sure to adjust the min-width as well*/
[type="checkbox"].fancy-check + label:before {
font-family: 'FontAwesome';
display: inline-block;
box-sizing: border-box;
border: 1px solid transparent;
font-size: 22px;
min-width: 28px;
padding: 2px 0 0 3px;
}
/* toggle font awsome icon*/
[type="checkbox"].fancy-check:checked + label:before {
content: "\f046";
}
[type="checkbox"].fancy-check:not(:checked) + label:before {
content: "\f096";
}
/*Do something on focus, in this case show dashed border*/
[type="checkbox"].fancy-check:focus + label:before {
border: 1px dashed #777;
}
/*Do something on hover, in this case change the image color*/
[type="checkbox"].fancy-check:hover + label:before {
color: #67afe5;
}