标签模拟多选择框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
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有