标签模拟多选择框checkbox

标签模拟多选择框checkbox

用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; width: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; }