之前总是匆匆看过，如今终于知道该怎么搞了。。。
**利用label挂钩checkbox的特点来实现。
当html代码中，label的for属性值和checkbox的id值一样的时候，label就可以控制checkbox的选择了。
为label的伪元素添加背景图片，覆盖真正的checkbox对象，这样，既有图片的美观效果，又有checkbox一切的交互行为。
这里使用了定位，不然不能覆盖原始的复选框。而且文字和图片之间要间隔，文字也需要设置为定位对象。总之，这里都是定位关系。**
设计一个图片如下，默认状态，点击状态，不可用状态。
input[type=checkbox]+label:before{ content:""; position:absolute; width:20px; height:20px; background:url(images/btn1.png) no-repeat; } input[type=checkbox]:checked+label:before{ background-position:-28px 0;} input[type=checkbox]+label span{ font-size:14px; position:absolute; left:30px;} #check{ position:relative;}//对父元素坐定位，使下面对父元素为起点
