芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
12

自定义文件上传控件样式(兼容 IE6)

作者 芒果/分类 代码/发布于 2011-06-22 18:31

要想直接通过 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

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/custom-input-file-style-ie-compatible/" title="自定义文件上传控件样式(兼容 IE6)" rel="bookmark">自定义文件上传控件样式(兼容 IE6) | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 12 条群众意见

  1. DeadFire /2011-06-23 16:33

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

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

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

    #2
  3. 芒果Firm/2011-06-23 17:03

    你想太多了…… 回应

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

    这个代码插件蛮漂亮 回应

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

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

    #5
  6. 芒果keelii/2011-07-11 11:34

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

    #6
  7. keelii芒果/2011-07-12 09:13

    oh~~~yes^!^

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

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

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

    #8
  9. sailor /2012-07-11 09:23

    博主,这样的样式点击了上传文件是显示不出那个被选中的文件买名啊。。 回应

    #9
  10. 芒果sailor/2012-07-11 09:57

    用 input.value 取值 回应

    #10
  11. 许胜斌 /2013-05-09 10:37

    IE6下有问题,不信你们试试 回应

    #11
  12. ?
    怎么修改 HTML 中上传选择框(input file)的样式,以达到同时解决 FireFox 下遮盖其他元素问题,以及中英文等不同语言下右边按钮宽度不同导致影响布局问题? - web前端开发 - 开发者问答 /2013-05-19 16:57

    […] 回答: 正好前阵子写过这个教程,关于文件上传控件的样式自定义:http://www.mangguo.org/custom-input-file-style-ie-compatible/ […] 回应

    #12

下面我简单说几句