Comments on: A Cheaky Way to Style an input type=”file”

By: tiagoepifanio

tiagoepifanio — Thu, 21 Jan 2010 09:33:01 +0000

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

By: tidelipop

tidelipop — Wed, 11 Nov 2009 14:08:58 +0000

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

By: webdevs

webdevs — Thu, 24 Apr 2008 16:19:02 +0000

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

By: Debt Reduction

Debt Reduction — Wed, 07 Nov 2007 23:18:05 +0000

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

By: Krijn Hoetmer

Krijn Hoetmer — Mon, 17 Sep 2007 11:34:06 +0000

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

By: skrd

skrd — Thu, 13 Sep 2007 12:22:42 +0000

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.

By: Jabapyth

Jabapyth — Wed, 12 Sep 2007 20:28:51 +0000

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

By: Shady

Shady — Wed, 12 Sep 2007 18:18:43 +0000

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 :)

By: boodie

boodie — Wed, 12 Sep 2007 16:49:15 +0000

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

By: Marc

Marc — Wed, 12 Sep 2007 16:30:46 +0000

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.

By: Wade Harrell

Wade Harrell — Wed, 12 Sep 2007 15:33:03 +0000

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

By: akuehner

akuehner — Wed, 12 Sep 2007 15:29:19 +0000

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

By: Scott Schiller

Scott Schiller — Wed, 12 Sep 2007 15:26:04 +0000

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.)

By: Liming

Liming — Wed, 12 Sep 2007 15:11:45 +0000

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

By: Maxim Kozhuh

Maxim Kozhuh — Wed, 12 Sep 2007 14:54:39 +0000

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 )

By: Max

Max — Wed, 12 Sep 2007 14:35:48 +0000

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

By: Marty

Marty — Wed, 12 Sep 2007 14:28:39 +0000

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…

By: Edd Couchman

Edd Couchman — Wed, 12 Sep 2007 13:50:37 +0000

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.