改变checkbox的默认样式总共有两种方法，大体思路都是一样的，先将checkbox隐藏，然后用一个样式元素来伪装成checkbox，主要的不同之处在于如何设置选中后的样式。

第一种方法是使用图片，将不同状态下的样式集合到一张图片上，根据改变background-positon来改变样式，类似于css sprite，之前随笔中的icheck就是这个原理，这种方法的兼容性比较好，但是不够灵活。

第二种方法是使用transform绘制选中后的样式，这样就可以根据自己的喜好随意修改样式了，但是兼容性不太强。

下图代码是第二种方法，其中红色方框部分为transform的绘制过程。

1.html结构是这样的：

label将样式元素span和checkbox绑定起来

2.css是这样的：

.input:checked+.span:after实现样式切换

3.源码：

1  2  3  4      
       5       6      23 24 25      
      
       26          
       27              28              29          30      
      
31 32 

 4.补充一段radio的css源码（HTML结构和checkbox是一样的）：

1 .radioLabel{
    position: relative;} 2 .radioInput{
    display: none;} 3 .radioSpan{
    display: inline-block;width: 1em;height: 1em;border:1px solid red;border-radius: 50%;} 4 .radioInput:checked+.radioSpan:after{ 5     content: ""; 6     position: absolute; 7     top: 47%; 8     left: 29%; 9     width: .4em;10     height: .4em;11     border-radius: 50%;12     background-color: red;13 }

 5.补充二者的效果图：

checkbox：

radio：