默认状态下的复选框：
<input type="checkbox" id="awesome"/>
<label for="awesome">Awesome!</label>
当 <label>元素与复选框关联之后，可以起到触发开关的作用。我们可以为它添加生成性的内容（伪元素），并基于复选框的状态来为其设置样式。然后再把真正的复选框隐藏起来。
接下来为它添加样式：
input[type="checkbox"] + label:before {
content:"\a0"; /*不换行空格*/
display:inline-block;
vertical-align:0em;
width:.75em;
height:.75em;
margin-right:.2em;
border-radius:.2em;
background:#ace;
text-indent:.15em;
line-height:.65;
}
复选框和 label 的样子
现在给复选框的勾选状态(checked)加上不同的样式：
input[type="checkbox"]:checked + label:before {
content:"\2713";
background:#fce;
}
checked 状态
现在，把原来的复选框以一种不损失可访问性的方式隐藏起来。这意味着不能使用
display：none；因为那样会把它从键盘tab键切换焦点的队列中完全消除。
input[type="checkbox"] {
position:absolute;
clip:rect(0,0,0,0); /*clip 属性剪裁绝对定位元素。*/
}
也可采用另一个方法：
input[type="checkbox"] {
position:absolute;
left:-9999px; /*让当前元素跑到页面外面去*/
}
你还可以继续优化它，比如在它聚焦或禁用时改变它的样式，甚至可以用过渡或者动画来让各个状态更加平滑。
参考书籍：Lea Verou《CSS揭秘》
