我们知道html表单控件中的单选框和多选框样式单一,并且不易修改,那么有什么方法使我们的单选框和多选框样式变好看并且还具有单选框和多选框的功能呢?
我们可以用Label标签
< label> 标签为 input 元素定义标注(标记)
label 元素不会向用户呈现任何特殊效果。若在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上
for属性可把 label 绑定到另外一个元素,< label> 标签的 for 属性应当与相关元素的 id 属性相同。
说一下原理吧 我们定义label标签的样式并把相应的表单控件隐藏 用label 标签代替 相应的表单控件。
下面是做的一个简单效果
用label代替了单选框 实现了一个选中为方块 未选中为方框
,效果
如此我们就可以制作各种花样的单选多选框了 并且可以用label 制作各种表单样式了