利用css3完成对checkbox和radio的美化

在前端领域，checkbox和radio作为自有的功能标签，对前端的贡献巨大。

问题来了，不同浏览器，甚至不同系统，不同手机的样式各不相同，对于保持标签的同质化实为困难，其次一般这种标签都很难看，难以满足大部分人的需求

so,伴随问题而来的解决办法也来了：

用css格式化其相关样式
用其它标签（div，p，span……）写样式，js模拟相关功能
css3新出特性解决

综上所述，我们来分析一下这三种方法：

1的方法需要书写一大堆格式化的属性，例如-webkit-appearance，border,background,border-radius……,实属麻烦
2的方法较1更麻烦，既要重写样式又要用js将其功能模拟出来
3的方法最为简便，同时兼具了的1和2的优点

ok，如何用第3种方法来DIY自己的checkbox或radio呢？

核心

input~替代checkbox或radio的标签

同时将checkbox或radius包在label的父级中，将checkobox或radio隐藏掉（display：none）；

上代码：

css部分

label{display:block;position:relative;width:58px;height:58px;}
input{display:none;}
span{border:4px solid #c6c7c7;display:inline-block;width:50px;height:50px;position:relative;transition:.3s;-webkit-transition:.3s;}
span:before{background:#0ca3db;width:0;height:4px;position:absolute;top:50%;left:8px;margin-top:-1px;content:'';transform:rotate(45deg);-webkit-transform:rotate(45deg);-webkit-transform-origin:left top;transform-origin:left top;}
span:after{background:#0ca3db;width:0;height:4px;position:absolute;top:80%;left:18px;margin-top:-2px;content:'';transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-webkit-transform-origin:left top;transform-origin:left top;}
#love{transition:.3s;-webkit-transition:.3s;}
#love,#love i{border:4px solid #333;width:30px;height:30px;transform:rotate(45deg);-webkit-transform:rotate(45deg);margin:0 auto;border-top-color:rgba(255,255,255,1);border-left-color:rgba(255,255,255,1);position:relative;}
#love:before,#love:after,#love i:before,#love i:after{position:absolute;content:'';border:4px solid #333;width:30px;height:30px;border-radius:30px;transition:.3s;-webkit-transition:.3s;}
#love:before,#love i:before{left:-4px;top:-19px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);border-bottom-color:rgba(255,255,255,0);border-left-color:rgba(255,255,255,0);}
#love:after,#love i:after{left:-19px;top:-4px;transform:rotate(135deg);-webkit-transform:rotate(135deg);border-top-color:rgba(255,255,255,0);border-left-color:rgba(255,255,255,0);}
#love i{background:#f00;width:22px;height:22px;display:block;transform:rotate(0);-webkit-transform:rotate(0);border-color:#f00;transform:scale3d(0,0,0);-webkit-transform:scale3d(0,0,0);transition:.3s;-webkit-transition:.3s;}
#love i:before,#love i:after{border-color:#f00;width:22px;height:22px;background:#f00;}
#radio span{border-color:#13d390;}
#radio span:before,#radio span:after{background:#13d390;}
em{display:block;width:50px;height:50px;border:2px solid #ccc;background:#999;border-radius:50px;position:relative;transition:.3s;-webkit-transition:.3s;}
em:before{position:absolute;top:15px;left:15px;background:#333;width:6px;height:6px;border-radius:6px;content:'';}
em:after{position:absolute;top:15px;right:15px;background:#333;width:6px;height:6px;border-radius:6px;content:'';}
em strong{position:absolute;left:50%;bottom:8px;width:30px;height:30px;margin-left:-17px;border-radius:30px;border:2px solid rgba(0,0,0,0);border-bottom-color:#333;transform:rotate(180deg);-webkit-transform:rotate(180deg);-webkit-transform-origin:center 30px;transform-origin:center 30px;}
input:checked~span{border-color:#0ca3db;}
input:checked~span:before{animation:move1 .3s forwards;-webkit-animation:move1 .3s forwards;}
input:checked~span:after{animation:move2 .3s forwards;-webkit-animation:move2 .3s forwards;}
input:checked~#love{border-bottom-color:#f00;border-right-color:#f00;}
input:checked~#love:before{border-right-color:#f00;border-top-color:#f00;}
input:checked~#love:after{border-right-color:#f00;border-bottom-color:#f00;}
input:checked~#love i{transform:scale3d(1,1,1);-webkit-transform:scale3d(1,1,1);border-color:#f00;}
input:checked~#love i:before{border-color:#f00;}
input:checked~#love i:after{border-color:#f00;}
input:checked~em{background:#f5f500;border-color:#d39815;}
input:checked~em:before,input:checked~em:after{background:#d39815;}
input:checked~em strong{border-bottom-color:#d39815;transform:rotate(0);-webkit-transform:rotate(0);-webkit-transform-origin:0 0;transform-origin:0 0;}
@keyframes move1{
    0%{
        width:0;
    }
    100%{
        width:20px;
    }
}        
@-webkit-keyframes move1{
    0%{
        width:0;
    }
    100%{
        width:20px;
    }
}
@keyframes move2{
    0%{
        width:0;
    }
    60%{
        width:0;
    }
    100%{
        width:35px;
    }
}        
@-webkit-keyframes move2{
    0%{
        width:0;
    }
    60%{
        width:0;
    }
    100%{
        width:35px;
    }
}

html部分

<label for="demo1">
    <input type="checkbox" id="demo1" />
    <span></span>
</label><br><br>
<label for="demo2">
    <input type="checkbox" id="demo2">
    <div id="love">
        <i></i>
    </div>
</label><br><br>
<div style="overflow:hidden;" id="radio">
    <label for="demo3" style="float:left;margin-right:20px;">
        <input type="radio" name="name" id="demo3" checked />
        <span></span>
    </label>
    <label for="demo4" style="float:left;margin-right:20px;">
        <input type="radio" name="name" id="demo4" />
        <span></span>
    </label>
    <label for="demo5" style="float:left;margin-right:20px;">
        <input type="radio" name="name" id="demo5" />
        <span></span>
    </label>
</div><br><br>
<div id="cry" style="overflow:hidden;">
    <label for="demo6" style="float:left;margin-right:20px;">
        <input type="radio" name="n" id="demo6" checked />
        <em><strong></strong></em>
    </label>
    <label for="demo7" style="float:left;margin-right:20px;">
        <input type="radio" name="n" id="demo7" />
        <em><strong></strong></em>
    </label>
    <label for="demo8" style="float:left;margin-right:20px;">
        <input type="radio" name="n" id="demo8" />
        <em><strong></strong></em>
    </label>
</div>