思路：使用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\0; /*IE8+都能使用這條樣式,這行需寫在IE7hack之上，在win10中測試的時候發現，IE7執行了該行樣式，但是數值為空*/
+color: red; /*IE7才能使用這條樣式*/
}
form:nth-child(1) .label1 { /* IE9+才能使用的樣式*/
color: green;
}
結構參考上面的代碼
如上樣式，在IE7和IE8中字體為紅色，IE9+和其他常用瀏覽器則為綠色，這樣就能達到在低版本瀏覽器中使用自帶checkbox，高版本瀏覽器使用自定義樣式的checkbox了，還是挺使用的；
如果有更好的實現和兼容方式，請在評論中告知，謝謝了；
一些漂亮的樣式可以參考下這個博客