之前做項目的時候，也遇到過需要按照設計稿把<input type="checkbox">和<input type="radio">的默認樣式進行修改，但發現，並沒有可以重置效果的方法，之前用過-webkit-appearance的方法，但是這個只在webkit內核的瀏覽器里面生效，火狐不生效。
所以自己寫了個js，用li來模擬復選框和單選框的效果，很簡單，7行就行。
效果圖： 
涉及到的知識點：自定義屬性來存儲點擊狀態和原來的class名
html內容：
<div id="box"> <p>你最喜歡的運動</p> <ul> <li>爬山</li> <li>騎車</li> <li>游泳</li> <li class='hong'>籃球</li> <li class='hong'>足球</li> <li>羽毛球</li> <li>跳繩</li> <li>跑步</li> </ul> </div>js內容：
注釋比較多，是為了說明清楚，可能有點亂，能看懂的可以把注釋刪掉
var aLi = document.querySelectorAll('#box ul li'); /*獲取所有的li，如果要用class獲取，可寫成document.querySelectorAll('.class')*/ for (var i=0;i<aLi.length;i++ ) { aLi[i].ifCheck = false; /*自定義屬性用來表示有沒有被選中，初始化設置成false，未選中*/ aLi[i].nowClass = aLi[i].className; /*自定義屬性用來存儲最初的className，例如html內容里的class名，hong，這樣在后面添加on的class名之后，不會導致原來的class名直接被覆蓋*/ aLi[i].onclick = function(){ if(this.ifCheck){ /*當點擊當前li時，如果ifCheck是已經被選中狀態*/ this.className = this.nowClass /*則讓當前點擊的li的class名等於最初的名字，也就是說把選中的on的class名去掉*/ }else{ this.className += ' on' /*如果是未選中狀態，則加上on，表示被選中*/ } /*可寫成三目樣式 this.className = this.ifCheck?this.nowClass:this.className+' on';*/ this.ifCheck = !this.ifCheck; /*一開始未選中，點擊之后變成選中，不然相反，所以要給ifCheck的屬性取反*/ }; };css樣式：
#box{ width:600px; margin:50px auto; } #box p{ font-size:14px; font-weight:bold; border-bottom:1px dashed #000; line-height:30px; } #box ul{ margin-top:10px; overflow:hidden; } #box ul li{ width:67px; height:20px; float:left; background-image:url(images/ck.png); /*未選中時候的背景圖*/ background-repeat:no-repeat; font-size:12px; line-height:20px; text-indent:30px; margin-right:8px; cursor:pointer; } #box ul li.on{ background-image:url(images/cked.jpg); /*選中時候的背景圖*/ } #box ul li.hong{ color:red; }