利用【伪元素】自定义复选框

默认状态下的复选框：

<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揭秘》