之前做项目的时候,也遇到过需要按照设计稿把<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<