自定义复选框样式

效果图：

由于复选框的样式，现在还没有支持自定义，所以我们只能使用一个伪元素来模拟复选框，并将其与选中状态绑定，用该伪元素来代替复选框绑定。并自定义样式来模拟复选框。

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