表单单选框，多选框美化

之前总是匆匆看过，如今终于知道该怎么搞了。。。

利用 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;
}//对父元素坐定位，使下面对父元素为起点

结构是

<div id="check">
<input><label><span></span></label>
</div>