许多花哨的复选框解决方案都存在以不接收输入焦点的方式删除原始输入复选框的缺陷。
这是不可接受的，原因有两个：
- 您不能使用键盘（
Tab-key和spacebar）导航到复选框并更改其值。
- 您不能在复选框上应用悬停和聚焦样式。
@konsumer 上面的解决方案很好，但缺乏输入焦点能力。但是，我遇到
了@geoffrey_crofte 在输入焦点起作用的地方的
实现。然而，它可能不像@konsumers那么花哨
所以..我将这两者结合起来并提出了一个笨拙的例子。此解决方案的唯一缺点是您必须使用特定的 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;
}