如何在没有 JavaScript 的情况下设置文件上传按钮的样式？

无需 JavaScript 设计文件上传按钮

许多自定义文件上传按钮的尝试通常采用 JavaScript 或 Quirksmode 的方法，这在尺寸和自动调整方面存在局限性。本文探讨了一种使用 的不太麻烦的解决方案。标签。

利用 标签

; element 使我们能够在没有 JavaScript 的情况下设计文件上传按钮的样式。它将点击事件转发到其子元素，允许我们将其用作隐藏文件上传按钮的包装。

代码示例

<label class="myLabel">
    <input type="file" required/>
    <span>My Label</span>
</label>

label.myLabel input[type="file"] {
    position:absolute;
    top: -1000px;
}

.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;
}

在此示例中，我们隐藏文件上传按钮使用position:absolute和top:-1000px并设置样式根据需要标记。标签接收点击事件并将其转发到隐藏的输入按钮。

这种方法的优点

• 与 webkit 的内置样式相比，样式具有更大的灵活性。
• 无需 JavaScript，效率更高。
• 它克服了 Quirksmode 的限制方法，使文件按钮能够填充整个父容器。

以上是如何在没有 JavaScript 的情况下设置文件上传按钮的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！