使用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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容