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

发布于02月18日

我试图根据我的个人喜好设计一个文件上传按钮，但没有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，最好使用尽可能少的"黑客"编码(因为黑客攻击通常会带来其他问题，比如小提琴中的问题)？

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相关问答推荐

如何在htmlAngular 17的@for中使用索引

如何仅 Select 与子代CSS类匹配的第一个元素

在Quarto/Discrealjs演示文稿中只增加一个列表的填充

如何创建剪切到路径的循环文本字幕？

如何将内容元素放在侧边栏旁边？

创建特定的CSS网格布局

Chatbox底部显示新消息，并向上推送旧消息

在R中从网页上的特定iframe中提取图形数据

我如何确保我的网格永远不会小于它的子网格

柔性盒内的物品；t覆盖整个宽度，即使设置为100%

如果使用复选框属性更改，如何防止事件更改？

如何实现与内嵌图像对齐的自动换行？

如何调整边框半径以匹配父边框半径

在HTML请求中添加源URL

如何将 HTML DateTime 转换为 Golang Time 对象

单击时 HTML 锚元素不重定向到相对路径

如何通过可见文本使用 Selenium 定位元素

悬停一个 div 时更改所有其他 div 上的字体 colored颜色

具有淡入/淡出效果的 CSS 选框

无法使用 HTML 中的 Bootstrap 自上而下居中