复选框，单选框都不好直接用css样式美化，总得用点奇思妙想才行。
    如果只考虑谷歌内核的浏览器的话，那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持，这就逼得大家另想办法了。
    利用label挂钩checkbox的特点来实现。
    当html代码中，label的for属性值和checkbox的id值一样的时候，label就可以控制checkbox的选择了。
    html代码如下：
    Markup
    <div id="check">
    <input type="checkbox" id="btn-check">
    <label for="btn-check"><span>全天</span></label>
    </div>
    为label的伪元素添加背景图片，覆盖真正的checkbox对象，这样，既有图片的美观效果，又有checkbox一切的交互行为。
    设计一个图片btn1.png，默认状态，点击状态，不可用状态。
    这里使用定位，不然不能覆盖原始的复选框。而且文字和图片之间要间隔，文字也需要设置为定位对象。总之，这里都是定位关系。
    这个效果只兼容IE9以上。
    CSS
    #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;}