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

Question

我目前正在为一个有大量表单的网站做前端，所有表单都在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>

我还尝试为其应用类，但也不起作用。

- Wayne Austin

---

这个问题是一个重复的。请参见：https://dev59.com/BHVC5IYBdhLWcg3whBej - Diodeus - James MacFarlane

Answer 1

以上许多答案都比较陈旧。在2013年，有一个更简单的解决方案存在：几乎所有现代浏览器......

• Chrome
• IE
• Safari
• Firefox需要一些修复

通过标签传递点击事件。在这里尝试：http://jsfiddle.net/rvCBX/7/

• 样式化<label>，使其看起来像您想要的文件上传方式。
• 在标签上设置for="someid"属性
• 创建一个隐藏的<input id="someid">元素。

在 Chrome、IE 和 Safari 中，单击标签将通过传递事件到文件上传。

Firefox 需要一个非常小的解决方法，详见本回答。

- mikemaccana

---

@mikemaccana：我可以随心所欲地编辑CSS吗？jsfiddle 像这样..我尝试了，但高度、宽度等没有改变。 - Prashant Tapase

@Prashant 是的，你需要在你的例子中设置 display: block。http://jsfiddle.net/prashantptapase/rvCBX/200/ - mikemaccana

@mikemaccana：非常感谢您。 - Prashant Tapase

很好的例子，谢谢。如果你将visibility:hidden替换为display:none;，那么它不会影响你的样式。 - Mert

Answer 2

使用HTML的输入大小属性size="40"结合CSS的宽度控制字段和按钮布局的完整宽度，可以对Firefox进行黑客攻击。

- ppostma1

---

这还有效吗？在Mac上尝试在Firefox 51.0.1上运行似乎并没有解决问题... - bert bruynooghe

大约在Firefox 36版本，它开始遵循CSS声明，同时忽略大小属性。 - ppostma1

Answer 3

假设您有一个输入：

<input style="display:none" id="js-choose-file" type="file">

使用jQuery创建一个虚假的按钮。

<a id="js-choose-computer" href="javascript:void(0);">From Computer</a>

请按照您的喜好设置上述按钮的样式，然后：

$("#js-choose-computer").on("click", function() {
  $("#js-choose-file").click();
  return false;
});

- Gaurav Gupta

Answer 4

从Firefox 82开始，伪类选择器::file-selector-button已经不再需要使用hack。当前版本的WebKit/Blink浏览器（Chrome、Edge、Safari、Opera）目前还不支持它，但可以使用非标准伪类::-webkit-file-upload-button来处理它。

这样，你的HTML代码可以保持语义化，而无需使用hack。

以下是MDN参考文档中的示例代码：

HTML

<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload">
</form>

CSS

input[type=file]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}
 
input[type=file]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

- karolus

Answer 5

Customformsjs插件通过其File模块类解决了这个问题。
http://customformsjs.com/doc/File.html

http://customformsjs.com/doc/File.js.html

基本上，它可以使文件输入字段具有某些限制的样式。它通过将其包装在容器中并使其透明以便您单击它来工作。演示页面展示了它的实际效果。

- Mitermayer Reis

Answer 6

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

- Samiksha

---

实际上，下划线 hack 是为了 IE6 设计的。 - I.devries

我不认为这会有帮助，问题在于Firefox不响应文件输入字段的任何样式，这不像是跨浏览器样式问题。 - Wayne Austin