HTML File upload field style

Question

I am trying to create a file upload field that has a little bit of style to it, but I seem to be having problems finding examples of this. I know part of the reason is that the field itself varies from browser to browser.

Any ideas how to do this? Or is there a way to do this without using a file element of a form that can be styled?

Answer 1

If what you mean is the text field for the file names, you can use the input[type=file] selector in the css files. For example :

input[type=file] { background-color: red; }

If what you mean is the file selection dialog box, I think it's browser/OS dependent and there's little (if any) you can do about it.

Answer 2

Here's some links I found:

QuirksMode Article

One Extra Pixel Article (look for the file input styling section)

Answer 3

I have come up on this problem before. Unfortunately, file uploads are nearly impossible to style consistently across browsers. As of CSS 2, I think, the W3C standard specifically leaves behavior undefined--think of how many ways it would need to be implemented on different platforms. Firefox, for example, generates anonymous button and input elements inside the file upload element which only inherit some of the properties that you set on the upload element itself.

You can get some to work using, for example, Furuno's method, but know that the behavior will be spotty and differ widely across platforms/browsers.

Answer 4

you canuse asp.net file upload editor