If you are ever in a situation where you need to style an input element with type=”file”, you will be very surprised to find that almost no styling is possible directly. This is because, no browser supports styling for <input type=”file”>. Only the “size” attribute was there, that gave some control over its width. Other than that, I had no luck.

Lucky I stumbled upon this page: http://www.quirksmode.org/dom/inputfile.html. This has a very clever techique, that actually styles an input element of type=”text” and an image, makes the original input type=”file” invisible, and places it over the fake input, to give the impression of a styled file uploader. A very sexy hack indeed!

---

Possibly related posts: (automatically generated)

• Styling input based on their type with CSS
• Submit without submit button
• Are you having trouble aligning form fields?
• Win A Copy Of The New Secrets Of Style