Opacity input file on ie7, ie8

Question

Well, i got this code:

<div class="teste">
    <input type="file" name="teste" />
    teste
</div>

CSS:

.teste {
   width:300px;
   height:100px;
   position:absolute;
   top:10px;
   right:10px;
   overflow:hidden;
   background-color:#FF0000;
   opacity:1; 
   filter:alpha(opacity=100);
}

input[type=file] {
   position:absolute;
   top:0px;
   right:0px;
   font-size:300px;
   opacity:0;
   filter:alpha(opacity=0);
}

In FF and Chrome works perfect but in ie the text 'teste' get white i figured out that when input file over the text 'teste' it get white.

someone knows how to fix it? Thanks.

Answer 1

I was very intrigued to why that solution is not working on IE7 / IE6, so, up to install windows XP (comes with IE6) and test the Fiddle!

First I've tested this: ^{should work as stated here!}

See the Fiddle!

<div class="teste">
    <input type="file" name="teste" />
    teste
</div>

.teste {
   width:300px;
   height:100px;
   position:absolute;
   top:10px;
   right:10px;
   overflow:hidden;
   background-color:#FF0000;
   opacity:1;
   filter:alpha(opacity=100);
}

input[type=file] {
    display:block;
    width:300px;
    height:100px;
    position:absolute;
    cursor:pointer;
    opacity:0;
    filter:alpha(opacity=0);
    top:10px;
    right:10px;
}

---

And it didn't work, so, realizing that the browser is old as hell^{MS IE css support}, I've removed the input[type=file] and replaced it with a plain old class .the_file. The end result was a complete success in solving the OP's problem:

See the Fiddle with the TESTED solution!

<div class="teste">
    <input type="file" name="teste" class="the_file" />
    teste
</div>

.teste {
   width:300px;
   height:100px;
   position:absolute;
   top:10px;
   right:10px;
   overflow:hidden;
   background-color:#FF0000;
   opacity:1;
   filter:alpha(opacity=100);
}

.the_file {
    display:block;
    width:300px;
    height:100px;
    position:absolute;
    cursor:pointer;
    opacity:0;
    filter:alpha(opacity=0);
    top:10px;
    right:10px;
}

Final Notes:

This was tested on Windows XP Professional v2002 SP2 with IE6 v.6.0.2900.2180, afterwards updated and tested with IE7 v.7.0.5730.13.

On IE7, both solutions work!

---

UPDATE:

Tested now also in: ^{under same winXP}

• IE 8 v8.0.6001.18702
• Opera 11.64
• K-Meleon 1.5.4
• FF 3.6.16
• Google Chrome 18.0.1025.168 m
• Safari 5.1.2 (7534.52.7)
• IE 9 v9.0.8112.16421IC ^{under win7}

---

Also noticed that you were mentioning the text getting white! Not happened on any of the tests performed!