使用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即可