效果图：
由于复选框的样式，现在还没有支持自定义，所以我们只能使用一个伪元素来模拟复选框，并将其与选中状态绑定，用该伪元素来代替复选框绑定。并自定义样式来模拟复选框。
1、将lable与checkbox绑定，并绑定伪元素：
<input type="checkbox" id="awesome"/>
<label for="awesome">Awesome</label>2、为伪元素设置样式，使之表现为复选框：
为了模拟逼真的效果，需要设置相符的宽高、圆角、背景、突出的效果、选中特效等。CSS代码如下：
input[type="checkbox"] + label::before{
content: "";
display: inline-block;
vertical-align: 0em;
width: .7em;
height: .7em;
margin-right: .4em;
border-radius: .1em;
background: rgba( 192,192,192,.6);
text-indent: .1em;
line-height: .65;
box-shadow: 0 0 0 1px rgba( 128,128,128,.6),
.5px .5px 1px white inset ;
}效果如下：
此时我们点击复选框，还不会显试在我们自定义的伪元素上，还需要设置选中时、聚焦时的样式。
3、通过css选择器改变不同状态时的伪元素样式：
选中时：
input[type="checkbox"]:checked + label::before{
content: "\2713";/*选中时的标识，显试在框内*/
color: black;/*标识颜色*/
background: yellowgreen;
padding: 0;
}效果如下：
同样的，我们也需要设置tab选中时的样式，此时仅仅需要加一层无偏移的box-shadow即可，代码如下：
input[type="checkbox"]:focus + label::before{
box-shadow: 0 0 0 1px rgba( 128,128,128,.6),
.5px .5px 1px white inset,
0 0 0 2px rgba( 30,144,255,.8);
}效果如下，可以看到，选中时效果很好：
设置禁用的样式：
input[type="checkbox"]:disabled + label::before{
content: "×";
}效果图如下：
4、隐藏原始的复选框：
如果我们直接使用display:none来隐藏原始复选框的话，会导致他从tab聚焦列表中移除，因此我们采用裁剪的方式，将其裁剪为0宽，0高即可：
input[type="checkbox"]{
position: absolute;
clip:rect(0,0,0,0);
}可以看到，原始框被隐藏，并且tab选中正常运行：
5、总结：
在实现这个自定义的复选框中应用到了：
- box-shadow模拟边框的、模拟突出表面的效果。
- 利用裁剪隐藏原始复选框。
- 利用伪元素模拟复选框，并设置样式。