使用纯css3自定义单选框radio和复选框checkbox

关于本文中单选框与复选框的自定义样式，只针对-webkit
-moz浏览器内核来讲，所以必然不考虑IE的兼容性问题；
如果想使用这种方式来自定义单选框与复选框样式，请尽量在移动端中使用；毕竟pc端有万恶的IE
在开发过程中，浏览器原始的单选框和复选框的样式确实有点丑陋，为了满足设计稿的样式，有时候我们不得不去做一些模拟复选框和单选框的形式，但是这样未免又多增加了一些DOM结构，这并不是我们正真想要的；

废话不多说，上代码；

单选框（radio）自定义样式

//html<input type="radio" />

//css部分
<style>
/** * 单选框自定义样式 **/ 
input[type=radio]{
   /*去除浏览器默认样式*/   
   -webkit-appearance: none;
   -moz-appearance: none;        
   appearance: none;        
   /*自定义样式*/  
    position: relative;        
   display: inline-block;        
   vertical-align: top;        
   width: 20px;        
   height: 20px;        
   border: 1px solid #00bfff;        
   outline: none;        
   cursor: pointer;        
   /*设置为圆形，看起来是个单选框*/ 
   -webkit-border-radius: 20px;        
   -moz-border-radius: 20px;        
   border-radius: 20px;    
}
/** * 单选框 选中之后的样式 **/
input[type=radio]:after{
   content: '';        
   position: absolute;        
   width: 12px;        
   height: 12px;        
   display: block;        
   left: 0;        
   top: 0;        
   right: 0;        
   bottom: 0;