How can I style a file input field in Firefox?

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.