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.



