Styling an input type=“file” button

Question

How do you style an input type=\"file\" button?

Answer 1

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:

Instead, you will need to use the size attribute:

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an tag directly, this is easily possible with the help of a tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619