How can I style a file input field in Firefox? - html

Question

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.

Answer 1

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.

Answer 2

Firefox can be hacked using the HTML input size attribute:
size="40"
while using a css width to control the full width of the field + button in layout

Answer 3

Let's say you have your input:
<input style="display:none" id="js-choose-file" type="file">
Create a fake button using jQuery.
<a id="js-choose-computer" href="javascript:void(0);">From Computer</a>
Style the above button any way you like. Then:
$("#js-choose-computer").on("click", function() {
$("#js-choose-file").click();
return false;
});

Answer 4

As of Firefox 82, hacks are no longer necessary, per the ::file-selector-button pseudo selector. Current versions of Webkit/Blink browsers (Chrome, Edge, Safari, Opera) don't support it at the moment, but it can be dealt with using the ::-webkit-file-upload-button non-standard pseudo-class.
This way, your HTML can be kept semantic, and no hacks are needed.
Example code from MDN reference above:
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 5

Customformsjs pluggin address this issue on its File module class.
http://customformsjs.com/doc/File.html
http://customformsjs.com/doc/File.js.html
Basicaly it make possible to kind to style File input fields with some restrictions. It work by wrapping it in a container and making it transparent so your click on it. The demo page shows it in action

Answer 6

Use cheat code ( # ) infront of the attribute of css class
say:
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;
}