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
Safari浏览器
带有几行修复的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 2

使用HTML输入大小属性可以攻击Firefox：大小= “40” 同时使用css宽度控制布局<+ p>中字段+按钮的整个宽度

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

从Firefox 82开始，根据::file-selector-button伪选择器，不再需要进行黑客攻击。当前版本的Webkit / Blink浏览器（Chrome，Edge，Safari，Opera）目前不支持它，但是可以使用::-webkit-file-upload-button非标准伪类来处理它。

通过这种方式，您的HTML可以保持语义，并且不需要黑客。

上面的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 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;
}

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

6 个答案: