标签模拟多选择框checkbox

2020-03-03 16:00:38来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

标签模拟多选择框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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Web_HTML

下一篇: CSS选择器与CSS的继承,层叠和特殊性