CSS and <input type='file'> - Discussion

Question

I want to change the style of my input and browse button for uploading files on my website, and have been reading how this is virtually impossible to do. There are apparently a couple of hacks that may work (not tested) but before I waste time on them I have questions on why professional sites seem to have no problems with it.

When I say professional, I mean job hunting sites where you can upload your resume, programming sites where you can upload your scripts, my colleges website where I could upload test papers, government, doctors, etc. etc.

I can't see them using a hack from some random programmer that may or may not work, so what are they doing as their websites seem to work and look good?

Any input on this would be appreciated.

Thanks

Beauford

---

Follow up:

Thanks for the input, but just a note to Yi Jiang - the ones you have posted certainly look styled in some way. I have one on my site and have looked at it in 5 browsers and all I get is the basic square grey browse button and square input field with no space between the two, and the browse button is just a tad bit taller than the input field, so it looks really shabby. If I could get it to look like your examples I would be ecstatic.

Thanks

Answer 1

Well, first of all these hacks arn't just from any 'ol random programmer. This one from quirksmode, for instance, is from a well respected source and, as far as I can tell, widely used (It's used here for the image upload dialog). Another example is this one created for the ajax upload script. Ignoring the Javascript completely, you can see that the button is purely a input type="file" stuck inside a div.

It's worth noting, however, that there's nothing there that you can't live with. Even large sites use plain, unstyled file inputs. This is from Hotmail

And this is from GMail

Answer 2

The file upload field cannot be styled (very much) in CSS, and cannot be scripted from JS (enough to make a surrogate control actually work). There are somewhat-sensible security reasons why this is the case, though you might argue they have been taken a bit too far.

More generally, it's difficult to style a file upload field anyway, because you don't know what a file upload field looks like. It's all up to the browser. Maybe you'll get a text field on the left and a ‘Browse’ button/popup on the right (in that case, which part does the border apply to? Or around both?); maybe you'll get just a popup on the left and a status icon/label on the right (like in Safari); maybe you'll just get a drag-and-drop field. Or something else. It's totally out of your control.

Most ‘professional’ sites do one of two things:

1. Don't care about it, just use a plain unstyled file upload field. Perhaps in a pop-up div when you request to upload (so at least it's not being inconsistent on-screen at all times).

2. Use a progressive-enhancement technique to replace the HTML file upload with an alternative uploader based around Flash (or less commonly Java or Silverlight; in the future we'll have more browsers with support for HTML5 drag-and-drop).

There is a hack detailed here that works by making the real file upload control invisible and positioning it over the top of a stylable display control. But it's really pretty unreliable, depending on a guess of what size the browser's file upload control will be and what bits will respond to a click. It's bad for accessibility (doesn't respond to keyboard correctly), bad for usability (it doesn't even line up on my perfectly normal Firefox) and I wouldn't recommend using it at all.