思路：使用label上的for熟悉，与checkbox上的id相对应来达到点击选中效果，在使用伪元素，或者其他元素，定位至checkbox上方，替代checkbox，并且隐藏checkbox，使用CSS3选择器：checked + 毗邻选择器，选中后给伪元素，或者其他元素添加选中样式；
兼容：
：after 兼容IE8+
: checked 兼容IE9+
综上述：自定义样式兼容IE9+
可使用IE8hack的方式，让IE8-使用原来的checkbox样式
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .label1 { position: relative; } .label1:after { position: absolute; top: 0px; left: -22px; width: 16px; height: 16px; background: #ededed; border: 1px solid #dcdcdc; content: ''; } form input[type='checkbox']:checked + .label1:after { background: red; } </style> </head> <body> <form action=""> <input type="checkbox" name="a" id="a1" onchange="check()"> <label class="label1" for="a1">记住密码</label> </form> </body> </html>
使IE8-能够正常使用原本样式的checkbox方法：
上方代码使用after伪元素覆盖了input，并没有使用css隐藏掉input，为的就是在IE8-的时候能隐藏为元素，使用原来的checkbox，这里就要运用到单独为IE8书写的hack了
.label1 {
position: relative;
color: red ; /*IE8+都能使用这条样式,这行需写在IE7hack之上，在win10中测试的时候发现，IE7执行了该行样式，但是数值为空*/
+color: red; /*IE7才能使用这条样式*/
}
form:nth-child(1) .label1 { /* IE9+才能使用的样式*/
color: green;
}
结构参考上面的代码
如上样式，在IE7和IE8中字体为红色，IE9+和其他常用浏览器则为绿色，这样就能达到在低版本浏览器中使用自带checkbox，高版本浏览器使用自定义样式的checkbox了，还是挺使用的；
如果有更好的实现和兼容方式，请在评论中告知，谢谢了；
一些漂亮的样式可以参考下这个博客