复选框，单选框都不好直接用css样式美化，总得用点奇思妙想才行。

如果只考虑谷歌内核的浏览器的话，那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持，这就逼得大家另想办法了。

利用label挂钩checkbox的特点来实现。

当html代码中，label的for属性值和checkbox的id值一样的时候，label就可以控制checkbox的选择了。

html代码如下：

<div id="check">
    <input type="checkbox" id="btn-check">
    <label for="btn-check"><span>全天</span></label>
</div>

为label的伪元素添加背景图片，覆盖真正的checkbox对象，这样，既有图片的美观效果，又有checkbox一切的交互行为。

设计一个图片如下，默认状态，点击状态，不可用状态。

这里使用了定位，不然不能覆盖原始的复选框。而且文字和图片之间要间隔，文字也需要设置为定位对象。总之，这里都是定位关系。

这个效果只兼容IE9以上。

#check{
	position:relative;}
input[type=checkbox]+label{
	position:absolute;
	width:60px;
	height:20px;}
input[type=checkbox]+label:before{
	content:"";
	position:absolute;
	width:20px;
	height:20px;
	background:url(images/btn1.png) no-repeat;
	}
input[type=checkbox]+label span{
	font-size:14px;
	position:absolute;
	left:30px;}
input[type=checkbox]:checked+label:before{
	background-position:-28px 0;}
input[type=checkbox]{
	position:absolute;
	left:0;
	top:0;}

具体效果如下：

See the Pen vawgVP by zhaolanzhen (@mrszhao) on CodePen.