跨浏览器自定义文件上传按钮样式
在不借助 JavaScript 的情况下自定义文件上传按钮的外观可能具有挑战性。然而，存在一种简单有效的技术，可以利用标签标签来实现所需的结果。
使用
标签提供了一种将文本标签与表单输入相关联的方法。通过将隐藏文件上传输入包含在标签内，您仍然可以捕获标签内的点击事件并将其重定向到隐藏输入。
CSS 样式
一旦文件上传输入是隐藏的，您可以使用 CSS 自由设置周围标签的样式。例如，以下代码演示了自定义文件上传按钮：
label.myLabel input[type="file"] {
position: absolute;
top: -1000px;
}
/***** Example custom styling *****/
.myLabel {
border: 2px solid #AAA;
border-radius: 4px;
padding: 2px 5px;
margin: 2px;
background: #DDD;
display: inline-block;
}
.myLabel:hover {
background: #CCC;
}
.myLabel:active {
background: #CCF;
}
.myLabel :invalid + span {
color: #A44;
}
.myLabel :valid + span {
color: #4A4;
}HTML 实现
要在 HTML 中实现此技术：
<label class="myLabel">
<input type="file" required/>
<span>My Label</span>
</label>通过使用这种方法，您可以完全控制文件上传按钮的样式，无需任何 JavaScript，也不受浏览器定义输入的限制尺寸。
以上是如何在没有 JavaScript 的情况下跨浏览器自定义文件上传按钮样式？的详细内容。更多信息请关注PHP中文网其他相关文章！
