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

这篇博客介绍了如何利用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>
         
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值