What CSS can I use to make the HTML file field transparent?

Question

I want to have <input type='file'> , which is superimposed on the image, so when the user clicks on it, the file download dialog opens, and the image is loaded via AJAX.

So, I want CSS to style the field so that only the view button is visible (without an associated field), or even better, only the transparent button is visible with overlapping text, such as “change photo”, nothing else.

It is necessary to work on:

• Ff 3+
• IE 7+ (pref 6+)
• Chrome 5+
• Safari 3+
• Opera 9 +

Answer 1

Input file transparency error => http://www.jsfiddle.net/steweb/LVjFy/ .. set its opacity to 0 and it is completely transparent, but available for click!

Another example with img and transparent file entry => http://www.jsfiddle.net/steweb/LVjFy/2/

EDIT (+ js, which mimics a file input click): http://www.jsfiddle.net/steweb/LVjFy/6/ .. not needed to set opacity ( EDIT2 needs to be tested, does not work on FF)

Answer 2

I have no chance. <input type="file"> , as a rule, is not very stylish, because CSS can not really describe its layout.

Answer 3

the magic word is "opacity."

 input /* type="file" */ { opacity:0.0; filter: alpha(opacity=0); /* IE 7 */ } 

You can click on it, but don’t see it;)

Answer 4

My solution is http://www.jsfiddle.net/dHFyZ/

Answer 5

background: transparent should do the trick for any invisible element that you want to click.