gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 11:28:16 25 4
gpt4 key购买 nike

<分区>

我正在尝试根据个人喜好设置文件上传按钮的样式,但如果没有 JS,我找不到任何真正可靠的方法来完成此操作。我确实找到了 two other关于这个主题的问题,但那里的答案要么涉及 JavaScript,要么建议 Quirksmode's approach .

我对这种 Quirksmode 方法的主要问题是文件按钮仍将具有浏览器定义的尺寸,因此它不会自动调整以适应放置在其下方的任何按钮。我已经基于它编写了一些代码,但它只会占用文件按钮通常占用的空间,因此它根本不会像我希望的那样填充父 div。

HTML:

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

CSS:

.myLabel {
position: relative;
}
.myLabel input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}

This fiddle证明了这种方法是多么有缺陷。在 Chrome 中,点击第二个演示按钮下方的 !! 无论如何都会打开文件对话框,但在所有其他浏览器中,文件按钮也不会占据按钮的正确区域。

是否有更可靠的方法来设置文件上传按钮的样式,无需任何 JavaScript,并且最好使用尽可能少的“hacky”编码(因为 hacking 通常会带来其他问题,例如 fiddle 中的问题) ?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com