本文探讨了HTML label标签的作用，包括为input元素定义标注、提高鼠标交互性，并介绍了如何利用label改变input[type='file']的样式。通过设置透明的file输入框并覆盖在自定义按钮上，实现美观的文件上传效果。同时，文章还展示了如何在file输入框中显示已选择文件的名称，并支持多文件选择及Esc退出选择对话框。
最近在做将input[type="file"] 改变其样式时，发现label的巨大潜力，特此记录一下。
1， label标签的作用
(1)为input元素定义标注(标记)
(2)不会呈现任何效果
(3)改变鼠标可用性。当用户选择label标签时，浏览器会自动将焦点转到和标签有关的表单控件上。
(4)label标签的for属性应当与相关元素的id属性相同。for属性将label绑到另一个元素上。
上传文件：
(5)label标签的form属性：规定label元素所属的一个或多个表单。
Male
Female
Male
==》》
当鼠标点击下面的Male时，上面单选框的Male会被选中。
但是这里面存在一个问题，
最低0.47元/天 解锁文章
扫一扫
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
