美文网首页
html自定义checkbox样式

html自定义checkbox样式

作者: 壹只很拽的猫 | 来源:发表于2019-11-26 15:47 被阅读0次

    1.原理

    就是将浏览器原生checkbox隐藏,对label进行相关操作。因为label和checkbox时绑在一起的,所以点击label就会选中

    2.实现效果

    演示地址:https://klren0312.github.io/HTMLStu/%E8%87%AA%E5%AE%9A%E4%B9%89checkbox/checkbox.html

    image

    3.代码

    提供一种

    image

    1.html代码

    原生的checkbox和对应的label,注意lable的for要与checkbox的id对应

    <input type="checkbox" value="markcheckbox1" id="markcheckbox1">
    <label class="mark" for="markcheckbox1">markcheckbox1</label>
    
    

    作者:治电小白菜
    链接:https://www.jianshu.com/p/95beec9f424a
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    相关文章

      网友评论

          本文标题:html自定义checkbox样式

          本文链接:https://www.haomeiwen.com/subject/tfaewctx.html