Styling an input type=”file” button

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:

<input type="file" style="width:200px">

Instead, you will need to use the size attribute:

<input type="file" size="60" />

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 is the best one I’ve seen.


Although it’s difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier:

Leave a Comment