使用css改變復選框樣式

html代碼

  <div class="allcheck" >
    <label><input id="allChecked" type="checkbox"/><span class="allimg"></span>全選</label>
 </div>

css

.allcheck input[type="checkbox"]{appearance: none; -webkit-appearance: none;outline: none;display:none}
.allcheck {width:100px;display:inline-block;cursor:pointer;}
.allcheck input[type="checkbox"] + span{
 width:20px;
 height:22px;
 display:inline-block;
  background:url(images/people/checkbox_s.png)  no-repeat;
  background-position:0 0;
  vertical-align: middle;
   }
 .allcheck input[type="checkbox"]:checked + span{background-position:0 -21px}

圖片


checkbox_s.png
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容