Wednesday, September 12th, 2007
Shaun Inman has got a lovely little hack that allows you to style file inputs with CSS and the DOM.
These elements are notoriously painful to deal with, and now we have select boxed playing nice on IE, we need something else to fix up :)
How It Works
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;).
Posted by Dion Almaer at 8:24 am