<input type="file"> - custom styles/css

Question

Is there a way to make <input type="file"> look the same in all browsers using some CSS ?

Answer 1

Quirksmode.org has an interesting article about it: http://www.quirksmode.org/dom/inputfile.html

Answer 2

try this -

1. Take a normal and put it in an element with position: relative.
2. To this same parent element, add a normal and an image, which have the correct styles. Position these elements absolutely, so that they occupy the same place as the .
3. Set the z-index of the to 2 so that it lies on top of the styled input/image.
4. Finally, set the opacity of the to 0. The now becomes effectively invisible, and the styles input/image shines through, but you can still click on the "Browse" button. If the button is positioned on top of the image, the user appears to click on the image and gets the normal file selection window. (Note that you can't use visibility: hidden, because a truly invisible element is unclickable, too, and we need the to remain clickable) Until here the effect can be achieved through pure CSS. However, one feature is still lacking.
5. When the user has selected a file, the visible, fake input field should show the correct path to this file, as a normal would. It's simply a matter of copying the new value of the to the fake input field, but we need JavaScript to do this.

More details - http://www.quirksmode.org/dom/inputfile.html

Answer 3

You could try using swfupload, an open source project that embeds a tiny Flash file on the page instead of the file input... You can use CSS to style the button that triggers the flash upload however you want.

Downside: it can be tricky to work with, and of course then your users have to have flash.

Upside: multiple files are selectable at once in the upload dialog!