Blogless: Blog of Design Less Better.

Posts tagged .

Fancy File Inputs with Mootools and CSS

God, I hate HTML DOM FileUpload Objects (<input type="file"> elements). They're displayed differently by every browser, and it's always ugly. Let's use some fancy AJAX and CSS to fix these horrible, horrible form objects.

Some time ago, we were working on a website that required a contact form with the ability to attach a file. This sounds like, at this point in web design, it should be incredibly simple. Imagine my chagrin as I learned that, in fact, styling the FileUpload Object had a smack of Holy Grail-ness to it. Well, at least as far as HTML form objects are concerned.

A lot of people have had similar ideas on how to handle this. I suppose it all started with Michael McGrady's solution, which was followed closely by an improvement on McGrady's technique from Peter-Paul Koch over at Quirksmode. The closest thing I found to a satisfactory solution, though, came from Shaun Inman. His solution was definitely the right idea, but it wasn't exactly full-featured, and I wanted it built in my favorite Javascript framework.

These icons link to social bookmarking sites where readers can share and discover new web pages.
PaulJun 16, 2008
 
Close this
E-mail It