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

Question

I want to have an <input type='file'> that overlaps on an image, so that when the user clicks on it, the file upload dialog opens, and the image uploads via AJAX.

So I want CSS to style the field in such a way that either only the browse button is visible (with no associated box), or even better, only a transparent button is visible with overlapping text like "change photo", nothing else.

Needs to work on:

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

How would a transparent button be visible? Kind of an oxymoron there. — Paul D. Waite, Feb 14 '11 at 09:59
You should use something like http://www.plupload.com/ instead. — thirtydot, Feb 14 '11 at 10:13
duplicate of [Style input type file?](http://stackoverflow.com/questions/4909228/style-input-type-file) and many other questions. — Aron Rotteveel, Feb 14 '11 at 10:22
@Aron: not really. The question you linked to is about styling file fields generally, whereas this one is about making them partially or completely invisible. — Paul D. Waite, Feb 14 '11 at 16:01

stecb · Accepted Answer · 2011-02-14T13:00:40.517

7

File input opacity test => http://www.jsfiddle.net/steweb/LVjFy/ ..set its opacity to 0 and it's fully transparent but clickable!

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

EDIT (+ js that simulates the file input click): http://www.jsfiddle.net/steweb/LVjFy/6/ ..don't need to set opacity (EDIT2 needs to be tested, isn't working on FF)

edited Feb 14 '11 at 13:00

answered Feb 14 '11 at 12:25

stecb

14,478
2
50
68

@Web Developer in ff (3.6.13) both mine and your solutions are working good ;) ...btw in FF you *must* click inside the input (text part) not outside of it, and to achieve this you could *drive* the user by adding a label between the input (z-index 2) and the image (z-index 0).. check it out http://www.jsfiddle.net/steweb/LVjFy/8/ (tested on FF) – stecb Feb 15 '11 at 08:47
thanks now works awesome. although i like my solution (coz i developed it) i have selected your as the answer as most of the image is clickable – aWebDeveloper Feb 15 '11 at 09:00
3

All three links in the answer are now broken. – kiwicomb123 Jul 05 '17 at 02:26

score 0 · Answer 2 · answered Feb 14 '11 at 09:57

0

I don’t fancy your chances. <input type="file"> isn’t generally very style-able, because CSS can’t really describe its layout.

answered Feb 14 '11 at 09:57

Paul D. Waite

96,640
56
199
270

score 0 · Answer 3 · answered Feb 14 '11 at 12:21

0

the magic word is "opacity".

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

}

You can click it, but dont see it ;)

answered Feb 14 '11 at 12:21

Chugworth

480
2
5

score 0 · Answer 4 · answered Feb 15 '11 at 08:56

0

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

answered Feb 15 '11 at 08:56

aWebDeveloper

36,687
39
170
242

score -1 · Answer 5 · edited Feb 14 '11 at 10:00

-1

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

edited Feb 14 '11 at 10:00

Paul D. Waite

96,640
56
199
270

answered Feb 14 '11 at 09:47

corroded

21,406
19
83
132

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

5 Answers5

Linked