思路就是在in将原input后面加一个label标签，先将原来的input隐藏掉，然后在点击的时候改变label标签的位置就可以了

关键是背景图片的位置

代码如下

css

#check .input_check {

visibility: hidden;

}

#check .input_check+label {

display: inline-block;

width: 20px;

height: 20px;

background: url('img/right.svg') no-repeat;

background-size: 100% 100%;

background-position: -20px -20px;

border: 1px solid skyblue;

}

#check .input_check:checked+label {

background-color: red;

background-position: 0 0;

}

html

<div id="check">

<input type="checkbox" class="input_check" id="check1"><label for="check1"></label>

<span>记住密码</span>

</div>

批量操作的我看了大量资料还没找到解决的办法，希望有大神能指导下，新手勿喷