label模拟radio、checkbox，自定义radio和checkbox

最新推荐文章于 2023-08-29 17:14:34 发布

爱打球的程序猿

最新推荐文章于 2023-08-29 17:14:34 发布

阅读量6.1k

点赞数 2

文章标签： checkbox radio 自定义

本文链接：https://blog.csdn.net/u013994112/article/details/52372522

版权

这篇博客介绍了如何利用label的for属性模拟自定义的radio和checkbox。通过将label与input元素的id绑定，点击label可以触发对应的radio或checkbox。内容详细解释了这种方法的工作原理，并提供了使用html代码实现自定义样式的思路。

摘要由CSDN通过智能技术生成

最近做的项目选项框比较多，为了让界面看起来更加美观，决定自定义radio和checkbox，功能不变的情况下提高用户体验。

这里比较关键的一点是用到label的for属性。

w3c的label介绍：

<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

所以当我们为label用for属性绑定了指定元素id时候，只要我们点击label，就会触发绑定的元素。可以在w3c查看例子。http://www.w3school.com.cn/tiy/t.asp?f=html_label

好了原理讲明白后，就可以开始自定义我们的radio和checkbox。大致思路就是用label绑定radio，然后设置radio为不显示，在自定义label的样式就行了。

html代码：

<div class="testOptions">
        <ul>
            <li><input type="radio" id="radio01" name="check"><label for="radio01"></label>选项</li>

关注