如何在 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>

我也尝试过对其应用一个类，但这也不起作用。

Answer 1

根据::file-selector-button 伪选择器，从 Firefox 82 开始，不再需要 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;
}

Answer 2

上面的许多答案都很老了。 2013 年出现了一个更简单的解决方案：几乎所有当前的浏览器...

• 铬
• IE
• 野生动物园
• Firefox 有几行修复

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

• 为<label> 设置您希望上传文件的样式。
• 在标签上设置for="someid"属性
• 创建一个 <input id="someid"> 元素，它是隐藏的。

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

Firefox requires a very small workaround, which is detailed in this answer.

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

Answer 4

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

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

基本上可以对文件输入字段的样式进行一些限制。它的工作原理是将其包装在一个容器中并使其透明，以便您单击它。演示页面显示了它的实际效果

Answer 5

可以使用 HTML 输入大小属性破解 Firefox： 尺寸=“40” 同时使用css宽度来控制布局中字段+按钮的全宽

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