如何在Firefox中设置文件输入字段的样式？

Question

我目前正在为一个有looooads表单的网站做前端,所有形式都在IE中看起来很漂亮,但我注意到在Firefox中文件输入字段没有响应我的任何样式,所有其他输入字段的类型很好.我在Firebug中检查了它并将其与正确的样式相关联,但没有改变它的外观.

如果这对我来说不是一个完整的脑屁,那么这是Firefox中的一个已知问题吗？如果是这样,我以前从未注意过它？

这是代码示例.

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>

我也尝试过应用它,但这也不起作用.

Answer 1

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

• 铬
• IE
• 苹果浏览器
• Firefox有几行修复

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

• 按照<label>您希望上传文件的方式设置样式.
• for="someid"在标签上设置属性
• 创建一个<input id="someid">隐藏的元素.

单击标签会将事件传递给Chrome,IE和Safari中的文件上传.

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

Answer 2

在 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;
}