用label标签模拟checkbox选择框,贴出关键代码如下:(具体样式还需自己调整一下)
我的效果·:
多个选项框设置一样,改变下input输入框的calss名与label名即可,
HTML代码: <div class="hander"> <input type="checkbox" name="favorite" value="1" id="color-input-red" class="color-input-red"/> <label for="color-input-red"></label> <span>手袋</span> </div>
CSS代码: #color-input-red +label{ display: block; 0.22rem; height:0.22rem; cursor: pointer; position: absolute; top: 0.09rem; left: 0; border: 1px solid #cccccc; } #color-input-red:checked +label::before{ display: block; content: "2714"; text-align: center; font-size:0.16rem; line-height: 0.20rem; color: #000000; }
//隐藏checkbox默认样式 input[type=checkbox]{ visibility: hidden; }