Wednesday, September 12th, 2007

A Cheaky Way to Style an input type=”file”

Category: CSS, JavaScript

Shaun Inman has got a lovely little hack that allows you to style file inputs with CSS and the DOM.

These elements are notoriously painful to deal with, and now we have select boxed playing nice on IE, we need something else to fix up :)

How It Works

We start with a simple replacement. The custom button image is set as the background-image of our wrapper element and dimensions are set to match.

Next we set the opacity of the file input itself to zero, effectively making it invisible but still clickable (something that can’t be achieved with display: none; or visibility: hidden;).

Finally, the JavaScript keeps the button portion of the the file input underneath the pointer whenever the mouse enters the wrapper element. A class of SI-FILES-STYLIZED (also configurable) is applied to the html element of the page for use as a styling context for compatible browsers.

Posted by Dion Almaer at 8:24 am
19 Comments

+++--
3.6 rating from 138 votes

19 Comments »

Comments feed TrackBack URI

I like Shaun’s method for its simplicity, but not having any feedback as to whether you have selected a file, what file it is, etc… is a drawback of this method.

I have found that SWFUpload is a much better way of doing this — although not without its limitations either.

Comment by Edd Couchman — September 12, 2007

Agree with Edd.

Could the file-path be copied to a visible type=text adjacent to the fule upload button, perhaps onChange of the hidden value? If so, that should do the trick…

Comment by Marty — September 12, 2007

Sorry for the slowness,
what is a ‘wrapper element’?
Thanks

Comment by Max — September 12, 2007

Technique was originally invented by Michael McGrady, and was already available at http://www.quirksmode.org/dom/inputfile.html at least one year ago. ( meanwhile it works in all browsers, not limited one as in Shaun’s method )

Comment by Maxim Kozhuh — September 12, 2007

I must be missing something here. I selected the upload icon in the demo, selected a file and then nothing changed, using firefox 2.

Comment by Liming — September 12, 2007

Silly designers, wanting to control how everything looks.. what next, fixed-width pages!? ;)
(I kid. It’s a nifty little trick for traditional form-based uploads, and I agree there are times where I want to override default browser-rendered form elements – not just file inputs.)

Comment by Scott Schiller — September 12, 2007

To change the icon after selecting a file just add a onchange code at the input element and do whatever you want.

Comment by akuehner — September 12, 2007

wow, the QuirksMode explanation of Michael McGrady’s solution is so much better than Shaun’s method. Granted I would not have seen it if not for reading this article, but since it is the first result when you google style+file+input it seems kinda weird to give props to the one that is not as robust….?

this does make me think i should google alternate solution whenever i see something interesting on ajaxian

Comment by Wade Harrell — September 12, 2007

I came up with a way to do this around 10 months ago. Shawn’s article fired me up to package it for general use. Check it out here:
http://marcgrabanski.com/code/style-file-input/

I still find SWFUpload is the best for multiple files, but I do enjoy using my own method for single file uploads.

Comment by Marc — September 12, 2007

my god the design of that site is toxic. Couldn’t find the friggn example link to save my life. my eyes are bleeding…

Comment by boodie — September 12, 2007

Unrelated to the material here:

It’s spelled CHEEKY not CHEAKY (throw up a define:term in Google if you’re unsure). That is all :)

Comment by Shady — September 12, 2007

Thats really cool! Nice idea, but is it really needed to move the form around?

Comment by Jabapyth — September 12, 2007

Disgusting. I mean some things can’t be styled, plus the opacity hack is nothing new. Site is toxic, example is in the package only, bad mojo sry.

Comment by skrd — September 13, 2007

Another trick; http://www.hedgerwow.com/360/dhtml/css-form-file-upload.html

Comment by Krijn Hoetmer — September 17, 2007

Interesting Idea. I was actually looking for a simple way to get a path and file name. Was experimenting with

Comment by Debt Reduction — November 7, 2007

I found a easier way to do this using jquery http://letstalkdev.com/development/styling-the-file-input/

Comment by webdevs — April 24, 2008

The link above doesn’t work, try this instead:
http://www.letstalkdev.com/?p=14

Comment by tidelipop — November 11, 2009

Found the easiest hack to achieve this:
http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html

Comment by tiagoepifanio — January 21, 2010

Here is an even easier way, without weird CSS hacks:
http://blog.mathiaskunto.com/2012/01/28/keeping-your-hair-from-turning-gray-or-how-to-style-the-aspfileupload-control-using-control-adapters/

Comment by CoderLeeAdama — January 30, 2012

Leave a comment

You must be logged in to post a comment.