标签模拟多选择框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;
}

 

来源：https://www.cnblogs.com/shiraly/p/12401003.html