input标签与label标签的“合作关系”
Posted 上善若水
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input标签与label标签的“合作关系”相关的知识,希望对你有一定的参考价值。
一直忽略了input和label的关系。一次在做自定义单选框的时候又重新捡起来这对“兄弟”。
label的for属性和input的id值一致的话,input和label就会组成一个组。例如:
<label for="test"> <input type="checkbox" id="test" abc="1111" /> </label>
点击label的区域同样会触发到input的选中效果。利用这一特性,然后结合伪元素可以自定义单选框和单选按钮。
详细代码可看:https://github.com/IT-girl-lijia/BaiduWebSchool/blob/master/BaiduNuomi_task1/index.html
代码效果:http://htmlpreview.github.io/?https://github.com/IT-girl-lijia/BaiduWebSchool/blob/master/BaiduNuomi_task1/index.html
以上是关于input标签与label标签的“合作关系”的主要内容,如果未能解决你的问题,请参考以下文章