使用css美化单选框（radio）和复选框（checkbox）的样式

//html
<label>
    <input name="checkbox" class="checkbox" type="checkbox"/>
    <s>s><span>天空span>
label>
<label>
    <input name="checkbox" class="checkbox" type="checkbox"/>
    <s>s><span>大地span>
label>

通过以上的HTML，将label与复选框关联起来，这样点击label就相当于点击复选框

//css
//隐藏默认的复选框样式
.checkbox{
  display: none;
}
//自定义未选中的复选框样式
.checkbox[type=checkbox]+s{
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url('http://host/name1.png');
  background-repeat: no-repeat;
}
//自定义选中时的复选框样式
.checkbox[type=checkbox]:checked+s{
  background-image: url('http://host/name2.png');
}

单选框： 将checkbox换成radio即可