在前端领域，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>
js部分
不用js，效果也可以做的很炫很厉害
so，这就我们所说的css3的方便之处
效果图
效果图
综上所述，css3和html5的诞生解决了很多前端多年来难以解决甚至无法解决的问题，以上的例子就是其中很微小的部分，欢迎读者能够喜欢我的文章，并通过评论和我交流，其中出现的错误望提出指正，本文中出现的css部分会涉及其它知识（例如animation动画等）欢迎阅读
