Styling an input type=”file”

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!

3 Responses to “Styling an input type=”file””

  1. 22 February, 2010 at 12:36 am

    Thanks for council, I will try to apply at myself.

  2. 22 July, 2013 at 6:02 am

    Such coffee makers, however, make below-extracted and weak coffee whenever brewing modest levels due to
    the fact they can not extend to a maximum enough
    environment to completely pull all flavors as part
    of the time period it takes to help make some cups. they coffee makers, even though they are less acquainted,
    provide something many for coffee lovers, whether through the sheer type of coffee
    designs and additionally flavors available for pod gadgets, or the
    past times planet tastes developed.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


I no longer maintain this blog. Please visit my new blog at http://ahsanity.com

My Book on CakePHP

If you are looking for a book to get started with CakePHP, then this book is definitely what you need :)
10% off at the publisher's site.

Blog Stats

  • 159,456 hits


Get every new post delivered to your Inbox.

%d bloggers like this: