如何在没有 JavaScript 的情况下跨浏览器自定义文件上传按钮样式？

跨浏览器自定义文件上传按钮样式

在不借助 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中文网其他相关文章！