许多花哨的复选框解决方案都存在删除原始输入复选框的缺陷，因为它不接收输入焦点。
这是不可接受的，原因有两个：
- 您不能使用键盘（
Tab-key 和 spacebar）导航到复选框并更改其值。
- 您不能在复选框上应用悬停和聚焦样式。
@konsumer 上面的解决方案很好，但缺乏输入焦点能力。
但是我遇到了
implementation
@geoffrey_crofte 输入焦点所在的位置。但是它可能不像@konsumers 那样花哨
所以.. 我将这两者结合起来并发布了plunker example。
此解决方案的唯一缺点是您必须使用特定的 html 标记才能使其工作：
<input type="checkbox" class="fancy-check" id="myId"/>
<label for="myId" ><span>The label text</span></label>
复选框后面必须跟一个标签标签。然后label 标签可以包括一个span 标签，包括标签文本。
我还要求将fancy-check 类用于要应用的新样式。这是为了避免样式破坏页面中缺少所需的其他复选框，位于label 标记之后。
该示例基于使用图标字体，在这种情况下它需要FontAwesome library。
样式表在这里：
/*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;
}