html - ie7、ie8 上的不透明度输入文件

Question

好吧，我得到了这段代码:

<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);
}

在 FF 和 Chrome 中运行完美，但在 ie 中，文本“teste”变白了，我发现当输入文件覆盖文本“teste”时，它变白了。

有人知道怎么解决吗？谢谢。

Answer 1

我很想知道为什么该解决方案不能在 IE7/IE6 上运行，所以，安装 Windows XP(IE6 附带)并测试 Fiddle!

首先我测试了这个: ^{应该按说明工作 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;
}

---

它没有用，所以，意识到浏览器太老了 ^{MS IE css support} ，我删除了 input[type=file] 并将其替换为普通的旧类.the_file。最终结果圆满解决了 OP 的问题:

参见 Fiddle with经过测试的解决方案!

<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;
}

最后的说明:

这是在 Windows XP Professional v2002 SP2 和 IE6 v.6.0.2900.2180 上测试的，之后用 IE7 v.7.0.5730.13 更新和测试强>.

在 IE7 上，两种解决方案都有效!

---

更新:

现在也在:^{在相同的 winXP 下}

进行了测试

• IE 8 v8.0.6001.18702
• 歌剧 11.64
• K-Meleon 1.5.4
• FF 3.6.16
• 谷歌浏览器 18.0.1025.168 m
• Safari 5.1.2 (7534.52.7)
• IE 9 v9.0.8112.16421IC ^win7

---

还注意到您提到文字变白了!执行的任何测试都没有发生!