Shivanand Shivanand - 2 years ago 128
HTML Question

Styling an input type="file" button

How to style the input


Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download