Html 如何在 Firefox 中设置文件输入字段的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/352467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I style a file input field in Firefox?
提问by Wayne Austin
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.
我目前正在为一个带有大量表单的站点做前端，所有表单都在 IE 中进行了样式化并且看起来很漂亮，但我刚刚注意到在 Firefox 中，文件输入字段没有响应我的任何样式，所有其他样式输入字段的类型很好。我已经在 Firebug 中检查过它并将正确的样式与它相关联，但没有改变它的外观。
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?
如果这不是代表我的一个完整的大脑放屁，那么这是 Firefox 中的一个已知问题吗？如果是这样，我以前怎么从未注意到它？
Here is a sample of the code.
这是代码的示例。
CSS:
CSS：
form.CollateralForm input,
form.CollateralForm textarea
{
width:300px;
font-size:1em;
border: solid 1px #979797;
font-family: Verdana, Helvetica, Sans-Serif;
}
HTML:
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.
我也试过给它应用一个类，但这也不起作用。
回答by mikemaccana
Many of the answers above are quite old. In 2013 a much simpler solution exists: nearly all current browsers...
上面的许多答案都很旧。2013 年存在一个更简单的解决方案：几乎所有当前的浏览器......
- Chrome
- IE
- Safari
- Firefox with a few-line fix
- 铬合金
- IE
- 苹果浏览器
- Firefox 有几行修复
pass through click events from labels. Try it here: http://jsfiddle.net/rvCBX/7/
传递来自标签的点击事件。在这里试试：http: //jsfiddle.net/rvCBX/7/
- 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.
- 设计
<label>您希望文件上传的任何样式。 for="someid"在标签上设置属性- 创建一个
<input id="someid">隐藏的元素。
Clicking the label will passthrough the event to the fileupload in Chrome, IE, and Safari.
单击标签会将事件传递到 Chrome、IE 和 Safari 中的文件上传。
Firefox requires a very small workaround, which is detailed in this answer.
回答by ppostma1
Firefox can be hacked using the HTML input size attribute: size="40" while using a css width to control the full width of the field + button in layout
Firefox 可以使用 HTML 输入大小属性进行攻击：size="40" 同时使用 css 宽度来控制布局中的字段 + 按钮的全宽
回答by Gaurav Gupta
Let's say you have your input:
假设您有自己的意见：
<input style="display:none" id="js-choose-file" type="file">
Create a fake button using jQuery.
使用 jQuery 创建一个假按钮。
<a id="js-choose-computer" href="javascript:void(0);">From Computer</a>
Style the above button any way you like. Then:
以您喜欢的任何方式设置上述按钮的样式。然后：
$("#js-choose-computer").on("click", function() {
$("#js-choose-file").click();
return false;
});
回答by Mitermayer Reis
Customformsjs pluggin address this issue on its File module class.
http://customformsjs.com/doc/File.html
Customformsjs 插件在其 File 模块类上解决了这个问题。
http://customformsjs.com/doc/File.html
http://customformsjs.com/doc/File.js.html
http://customformsjs.com/doc/File.js.html
Basicaly it make possible to kind to style File input fields with some restrictions. It work by wrapping it in a container and making it transparent so your click on it. The demo page shows it in action
基本上，它可以在有一些限制的情况下对文件输入字段进行样式设置。它的工作原理是将其包装在容器中并使其透明，以便您点击它。演示页面显示了它的实际效果
回答by Samiksha
Use cheat code ( # ) infront of the attribute of css class say:
在css类的属性前使用作弊码（#）说：
form.CollateralForm input,
form.CollateralForm textarea
{
width:300px; //for firefox
#width:200px; //for IE7
_width:100px; //for IE6
font-size:1em;
border: solid 1px #979797;
font-family: Verdana, Helvetica, Sans-Serif;
}
