我在这里基本上使用这个方法:https://coderwall.com/p/uer3ow来设置我的文件输入部分的样式,但它似乎在IE8中不起作用;我所看到的只是一个巨大按钮的一角。
HTML:
<div class="upload_btn">
<span>Choose File</span>
<input type="file" name="item_file_upload_1" id="item_file_upload_1">
</div>
CSS:
.forms .upload_btn {
position: relative;
display: inline-block;
text-align: center;
width: 97px;
height: 27px;
font-weight: 300;
font-size: 16px;
line-height: 27px;
color: #393d59;
border: 2px solid #b9c0d6;
overflow: hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.forms .upload_btn > input[type="file"] {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
font-size: 200px;
opacity: 0;
}
答案 0 :(得分:1)
好的,修改了这个答案:https://stackoverflow.com/a/1948200/472501
我能够为IE8应用以下CSS来修复问题:
.forms .upload_btn > input[type="file"] {
filter: alpha(opacity=0);
}
答案 1 :(得分:-1)
使用标签技术有一种更好,跨浏览器兼容,语义,完全可访问且仅CSS的方式。关于如何实现的出色文章:https://benmarshall.me/styling-file-inputs/