Question

html css checkbox 样式怎么写。原生的是第一个，我要改成第二个





Answer 1

给你个更好用的，当然你也可以自己随意修改

<div class="i-check">
    <input type="checkbox" checked/>
    <label></label>
</div>

css

.i-check {width: 20px;height: 20px;position: relative;margin: 20px auto;}
.i-check label {width: 20px;height: 20px;position: absolute;top: 0;left: 0;background: #1A9909;border-radius: 4px;}
.i-check  label:after {content: '';width: 9px;height: 5px;position: absolute;top: 4px;left: 4px;border: 3px solid #fff;border-top: none;border-right: none;background: transparent;opacity: 0;transform: rotate(-45deg);}
.i-check input[type=checkbox]:checked + label:after {opacity: 1;}
.i-check input[type=checkbox] {opacity: 0;position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;margin: 0;cursor: pointer;}