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 ar

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 however you you would like your file upload to be.
• Set for="someid" attribute on the label
• Create a 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.