Css 自定义文件上传控件样式（兼容 IE6）_html-js-css

概述要想直接通过 CSS 来控制文件上传控件，基本没戏的。当然也有一些解决方案，例如 Mr.Think 的这篇文章《利用label标签和CSS美化文件上传表单(不兼容IE6)》。昨天也恰好遇到了这个问题，顺手记录下吧。首先，给 <input type="file"> 元素戴个套子，这样比较安全嘛，是不是？看代码…

要想直接通过 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 是可以的。自己看吧，懒得看兼容了。

演示：

<!DOCTYPE HTML><HTML><head><Meta charset="utf-8"><Title>自定义文件上传控件样式（兼容 ie6）</Title><link href="/min/b=wp-content/themes/mangguo/CSS&f=reset.CSS,example.min.CSS" rel="stylesheet" /><style>body{Font-family:微软雅黑;}h1 {color:#000000;Font-size:16px;}h2 {color:#008000;Font-size:14px;}.input-file {display:inline-block;wIDth:100px;height:30px;line-height:30px;background:#ddd;text-align:center;overflow:hidden;position:relative;}.input-file:hover {background:#ccc;}.input-file input {opacity:0;filter:Alpha(opacity=0);Font-size:100px;position:absolute;top:0;right:0;}</style></head><body><h1>自定义文件上传控件样式</h1><h2>默认控件样式</h2><input type="file"><h2>处理后控件样式：<span> 标签</h2><span class="input-file">浏览...<input type="file"></span><h2>处理后控件样式：<a> 标签</h2><a href="JavaScript:voID(0);" class="input-file">浏览...<input type="file"></a></body></HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

总结

以上是内存溢出为你收集整理的Css 自定义文件上传控件样式（兼容 IE6）全部内容，希望文章能够帮你解决Css 自定义文件上传控件样式（兼容 IE6）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1021370.html

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

发表评论

评论列表（0条）