自定义文件上传控件样式（兼容 IE6）

前端

作者芒果/发布于 2011-06-22 18:31/共 8 条评论

2,468

/* 336x280*/

要想直接通过 CSS 来控制文件上传控件，基本没戏的。当然也有一些解决方案，例如 Mr.Think 的这篇文章《利用label标签和CSS美化文件上传表单(不兼容IE6)》。昨天也恰好遇到了这个问题，顺手记录下吧。

首先，给 <input type="file"> 元素戴个套子，这样比较安全嘛，是不是？看代码：

<span class="input-file">浏览...<input type="file"></span>

有了这个安全的外层容器，我们就可以开搞了。问题的核心有两点：第一，把丑陋的原生上传控件给藏起来；第二，支持点击上传功能。

关键的代码片段：

.input-file {
overflow:hidden;
position:relative;
}

.input-file input{
opacity:0;
filter:alpha(opacity=0);
font-size:100px;
position:absolute;
top:0;
right:0;
}

其中，字体大小 100px 的原因在于放大上传控件右侧的按钮区域，结合靠右定位，能够保证鼠标 cursor 为 default 状态。

另外，如果要支持鼠标悬停效果，也是可以的，把 span 标签改成 a 标签，然后加上 hover 伪类就可以了。

<a href="javascript:void(0);">浏览...<input type="file"></a>

貌似是全兼容的？反正 IE 是可以的。自己看吧，懒得看兼容了。

猛击这里查看 Demo 稿：css_input_file.html

/* 336x280*/

转载自 <a href="http://www.mangguo.org/custom-input-file-style-ie-compatible/" title="自定义文件上传控件样式（兼容 IE6）" rel="bookmark">自定义文件上传控件样式（兼容 IE6） | 芒果小站</a>

DeadFire /2011-06-23 16:33

怎么感觉还是默认样式好看和直观一点呢。回应

#1
Firm /2011-06-23 16:51

哈哈，带个套子这个说法有点意思。回应

#2
芒果对 Firm 说/2011-06-23 17:03

你想太多了…… 回应

#3
武汉seo服务 /2011-07-05 11:09

这个代码插件蛮漂亮回应

#4
keelii /2011-07-11 09:53

单独设置file的size也是可以哈！回应

#5
芒果对 keelii 说/2011-07-11 11:34

不可以，设置 size 貌似无法调整 input 元素的垂直高度。回应

#6
keelii 对芒果说/2011-07-12 09:13

oh~~~yes^!^

以前貌似看见过是设置size，不过好像记错了。实践才是检验真理的唯一标准~ 回应

#7
让 Chrome 崩溃的 CSS 代码 | 千里走单骑 /2011-09-06 21:29

[...] 自定义文件上传控件样式（兼容 IE6） (7) [...] 回应

#8

芒果小站