Wednesday, September 12th, 2007
A Cheaky Way to Style an input type=”file”
Category: CSS, JavaScript
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.
Related Content:
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.
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…
Sorry for the slowness,
what is a ‘wrapper element’?
Thanks
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 )
I must be missing something here. I selected the upload icon in the demo, selected a file and then nothing changed, using firefox 2.
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.)
To change the icon after selecting a file just add a onchange code at the input element and do whatever you want.
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
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.
my god the design of that site is toxic. Couldn’t find the friggn example link to save my life. my eyes are bleeding…
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 :)
Thats really cool! Nice idea, but is it really needed to move the form around?
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.
Another trick; http://www.hedgerwow.com/360/dhtml/css-form-file-upload.html
Interesting Idea. I was actually looking for a simple way to get a path and file name. Was experimenting with
I found a easier way to do this using jquery http://letstalkdev.com/development/styling-the-file-input/
The link above doesn’t work, try this instead:
http://www.letstalkdev.com/?p=14
Found the easiest hack to achieve this:
http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html