如何在Firefox中设置文件输入字段的样式？ [英] How can I style a file input field in Firefox?
问题描述
我目前正在做一个网站的前端，有一些looooads的形式，所有的样式和看起来漂亮的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...
- Chrome
- IE
- Safari
- 具有几行修正功能的Firefox
- Chrome
- IE
- Safari
- Firefox with a few-line fix
传递来自标签的点击事件。在此尝试： http://jsfiddle.net/rvCBX/7/
pass through click events from labels. Try it here: http://jsfiddle.net/rvCBX/7/
- 设置
< label>样式，但您希望文件上传。 - 在标签上设置
for =someid属性 - 创建
< input id =
- 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.
点击标签会将事件传递给fileupload Chrome，IE和Safari。
Clicking the label will passthrough the event to the fileupload in Chrome, IE, and Safari.
这篇关于如何在Firefox中设置文件输入字段的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
