这一小节对于我来说真的是福音，我一直很苦恼（对于checkbox）。在我未接触书本之前，我一直使用默认样式的checkbox，以前尝试修改它，给它定义宽度什么的都尼玛没有效果，这就让人很头疼了！
这一小节练习的还是伪元素，我们需要实现以下的checkbox
自定义checkbox
相对于每个浏览器都不一样的checkbox，chrome的默认样式还算可以接受
chrome默认样式
小测试
html
<input type="checkbox" id="awesome">
<label for="awesome">Awesome!</label>
第一步：
利用伪元素创建一个大小类似于原样式的方块
css
.checkbox input[type="checkbox"]+label::before{
content: '\a0'; /* non-break-block*/
display: inline-block;
vertical-align: .1em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65em;
transition: background .2s;
}
关于第一行的不换行空格，其实是个占位符
content: '\a0'; /* non-break-block*/
具体想了解不换行空格，可以看看这篇文章，写的很具体
效果：
第二步：
现在我们需要用符合可及性的方式来隐藏原来的checkbox,表示我们不能使用display:none,因为这样会把它完全从键盘Tab键里移动的顺序里移除。所以可以改用这种方式
input[type="checkbox"]{
position: absolute;
clip: rect(0,0,0,0);
}
效果：
第三步：
设置checked, focus样式
.checkbox input[type="checkbox"]:checked + label::before{
content: '\2713';
background: yellowgreen;
}
.checkbox input[type="checkbox"]:focus + label::before{
box-shadow: 0 0 0 1px #58a;
}
checked 状态
自定义checkbox完成
利用这个特性可以制作一些按钮状态（on和off不同的样式）
no checked
checked
当然这样的效果也可以用自定义属性（或者改变类）实现，不过需要一点JS代码。不过这种纯CSS实现方法更加有趣！
