如何在 Firefox 中设置文件输入字段的样式? [英] How can I style a file input field in Firefox?

问题描述

我目前正在为一个带有大量表单的站点做前端，所有表单都在 IE 中进行了样式设置并且看起来很漂亮，但我刚刚注意到在 Firefox 中，文件输入字段没有响应我的任何样式，所有其他类型的输入字段都很好.我已经在 Firebug 中检查过它，并将正确的样式与它相关联，但没有改变它的外观.

I am currently doing the front end for a site with looooads of forms, all styled up and looking pretty in IE, but I've just noticed that in Firefox the file input fields aren't responding to any of my styles, all the other types of input fields are fine. I've checked it in Firebug and its associating the correct styles to it, but not changing how it looks.

如果这不是代表我的一个完整的大脑放屁，那么这是 Firefox 中的一个已知问题吗?如果是这样，我以前怎么从未注意到它?

If this isn't a complete brain fart on my behalf, then is this a known issue in Firefox? And if so, how have I never noticed it before?

这是代码示例.

CSS:

form.CollateralForm input,
form.CollateralForm textarea
{
    width:300px;
    font-size:1em;
    border: solid 1px #979797;
    font-family: Verdana, Helvetica, Sans-Serif;
}

HTML:

<form method="bla" action="blah" class="CollateralForm">
   <input type="file" name="descriptionFileUpload" id="descriptionFileUpload" />
</form>

我也试过给它应用一个类，但也不起作用.

I've also tried applying a class to it but that doesn't work either.

推荐答案

上面的许多答案已经很老了.2013 年存在一个更简单的解决方案:几乎所有当前的浏览器...

Many of the answers above are quite old. In 2013 a much simpler solution exists: nearly all current browsers...

• 铬
• 浏览器
• Safari
• Firefox 进行了几行修复

传递来自标签的点击事件.在这里试试:http://jsfiddle.net/rvCBX/7/

pass through click events from labels. Try it here: http://jsfiddle.net/rvCBX/7/

• 设置 的样式，但您希望文件上传的样式如此.
• 在标签上设置 for="someid" 属性
• 创建一个 元素，这是隐藏的.

• Style the <label> however you you would like your file upload to be.
• Set for="someid" attribute on the label
• Create a <input id="someid"> element, that's hidden.

点击标签会将事件传递到 Chrome、IE 和 Safari 中的文件上传.

Clicking the label will passthrough the event to the fileupload in Chrome, IE, and Safari.

Firefox 需要一个非常小的解决方法，在这个答案中有详细说明.

这篇关于如何在 Firefox 中设置文件输入字段的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！