Friday, January 25, 2008

Dealing with INPUT Type="File" HTML

This site had a very detailed explanation and as well as implementation code on how to customize an File Input HTML field.

The concept is basically fade away the original real file input field and overlay above with a fake one at exact position. That looks great for graphics designer who wish to fully skin a web page.

A quick preview is here:

However, the problem comes when you have to change the with of the field, which you'll need to realign the fake layer.

Finally, after inspecting GMail's upload field, it seems to be just a plain old file input field, that's what I'll follow!

Take note that the CSS style "width" for file input file will work for IE but not Firefox, for Firefox, you have to add in the "size" attribute for the element itself.


No comments: