如何在Firefox中设置文件输入字段？ [英] How can I style a file input field in Firefox?

问题描述

我目前正在做一个网站的前端，这些网站的形式都很糟糕，所有的风格都很漂亮，但是我刚刚注意到，在Firefox中，文件输入字段没有响应任何我的样式，所有其他类型的输入字段都很好。我已经在Firebug中检查过它，并将正确的样式与它相关联，但不改变它的外观。

如果这不是我的一个完整的脑屁那么这是Firefox中的一个已知问题吗？如果是这样，我以前从来没有注意到过？

以下是代码示例。

CSS：

  form.Collat​​eralForm input，
 form.Collat​​eralForm textarea 
 {
 width： 300像素; 
 font-size：1em; 
 border：solid 1px＃979797; 
 font-family：Verdana，Helvetica，Sans-Serif; 
} 
  

HTML：

 < form method =blaaction =blahclass =Collat​​eralForm> 
< input type =filename =descriptionFileUploadid =descriptionFileUpload/> 
< / form> 
  

我也尝试过应用一个类，但也不行。

解决方案

以上许多答案都很旧。 在2013年，存在一个简单的解决方案：几乎所有当前的浏览器...

• Chrome


• IE


• Safari


• 具有几行修复功能的Firefox

从标签传递点击事件。请尝试： http://jsfiddle.net/rvCBX/7/

• 设置< label> ，但您希望将文件上传到。


• 在标签上设置 for =someid属性


• 创建一个







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

Firefox需要一个非常小的解决方法，这在这个答案中详细。

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.

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?

Here is a sample of the code.

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.

解决方案

Many of the answers above are quite old. In 2013 a much simpler solution exists: nearly all current browsers...

• Chrome
• IE
• Safari
• Firefox with a few-line fix

pass through click events from labels. Try it here: http://jsfiddle.net/rvCBX/7/

• 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.

Clicking the label will passthrough the event to the fileupload in Chrome, IE, and Safari.

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

这篇关于如何在Firefox中设置文件输入字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！