注册

修改,美化上传选择框(input file)的样式

嗨豆壳技术文章 时间:2014-05-08 17:41:06 [ray]

这个问题在网上有各种解决方案,但是都不是完美的解决方案。

大多数浏览器都不能直接设置input file的css样式,就算是宽度都不行。

还有利用 onclick事件来触发input file的click() 来模拟点击,但是都不能兼容所有浏览器...

目前已经有解决的方案:

1. 将input file设置为透明

2. 将一个div,span或其他随便一个标签放在input的下面。 此解决方案在浏览器兼容的问题上很容易处理。针对ie写个样式即可。因为ie的input file和谷歌,火狐的不太一样

<html>
<head>
<style type="text/css">
.sl-custom-file{ position:relative;display:inline-block;zoom:1;cursor:pointer;overflow:hidden;vertical-align:middle;}
.ui-input-file{ position:absolute;right:0;top:0;_zoom:30;font-size:300px\9;height:100%;_height:auto;opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";cursor:pointer;}
</style>
</head><body>
<span class="sl-custom-file">
    <input type="button" value="点击上传文件" />
    <input type="file" class="ui-input-file" />
</span>
</body>
</html>

标签

本文地址:https://www.hi-docs.com/article/10.html

上一篇:css清除浮动的几种方法

下一篇:linux date命令实现日期时间和Unix时间戳转换