html自定义checkbox样式

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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容