Styling File Inputs with CSS and the DOM
(Sep 11 2007 - 07:17:01 AM
by David Martin
) - [print blog
I don't know about you, but styling is both a passion and a sore spot to me. I love to get it to look right, but sometimes the trouble of doing so is sooooo hard. Enter this blog post by Shaun Inman on Styling File Inputs with CSS and the DOM.
Very very clever.
It solves a problem I've encountered before making File Inputs look good. I'll be using this next time I'm creating a file input page. It works well across platforms too. IE 5.5+, Firefox 1.5+, Safari 2.0+ all work well and looks like it could be modified to work in Opera and older versions of IE.
Here's the html:
<input type="file" class="file" />
And the css that drives it:
background: url(btn-choose-file.gif) 0 0 no-repeat;
.SI-FILES-STYLIZED label.cabinet input.file
Check out the article for the complete explanation.