用 IE8 设计文件输入按钮

Posted 2023-03-06

【中文标题】用 IE8 设计文件输入按钮

【英文标题】：Styling file input button with IE8

【发布时间】：2014-01-22 10:31:47

【问题描述】：

我在这里基本上使用这种方法：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;

【参考方案1】：

使用标签技术有一种更好的、跨浏览器兼容的、语义化的、完全可访问的和纯 CSS 的方式。关于如何实施的好帖子：https://benmarshall.me/styling-file-inputs/

【参考方案2】：

好的，修改这个答案：https://***.com/a/1948200/472501

我能够为 IE8 应用以下 CSS 来解决问题：

.forms .upload_btn > input[type="file"] 
    filter: alpha(opacity=0);