Shaun Inman has demonstrated in a great article how to customize file inputs. Thought to be impossible to style, Shaun proves that with a little imagination anything is possible.

We start with a simple replacement. The custom button image is set as the background-image of our wrapper element and dimensions are set to match.

Next we set the opacity of the file input itself to zero, effectively making it invisible but still clickable (something that can’t be achieved with display: none; or visibility: hidden;).

Finally, the JavaScript keeps the button portion of the the file input underneath the pointer whenever the mouse enters the wrapper element. A class of SI-FILES-STYLIZED (also configurable) is applied to the html element of the page for use as a styling context for compatible browsers.