Shivanand Shivanand - 6 months ago 17
HTML Question

Styling an input type="file" button

How to style the input

type="file"
button.

Answer

Styling file inputs is 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 www.quirksmode.org/dom/inputfile.html is the best one I've seen.