input标签与label标签的“合做关系”

一直忽略了input和label的关系。一次在作自定义单选框的时候又从新捡起来这对“兄弟”。html

label的for属性和input的id值一致的话,input和label就会组成一个组。例如:git

<label for="test">
    <input type="checkbox" id="test" abc="1111" />
</label>

点击label的区域一样会触发到input的选中效果。利用这一特性,而后结合伪元素能够自定义单选框和单选按钮。github

详细代码可看:https://github.com/IT-girl-lijia/BaiduWebSchool/blob/master/BaiduNuomi_task1/index.htmlspa

代码效果:http://htmlpreview.github.io/?https://github.com/IT-girl-lijia/BaiduWebSchool/blob/master/BaiduNuomi_task1/index.htmlcode

相关文章
相关标签/搜索