话说,文件上传控件的样式,就如同下拉框的样式一样,没办法通过 CSS 直接进行控制,虽然不影响正常的网页浏览,但是对于一个设计师的心血来说,不能完全还原,还是比较令人郁闷的,但是,活人总不能叫尿憋死,所以总是有很多方法能够达到我们的目的,例如: Mr.Think 的这篇文章,或者这篇文章。但是第一个不兼容IE6,比较遗憾,虽然我现在在自己的项目上坚决不支持IE6,但是,解决方法还是要掌握的。

另一个因素就是 Chrome 下的空间样式和 IE 以及 火狐下不同,具体就不举例子了。

最近想到这个问题,所以写出来和大家分享下,也兼容IE6,那就是,用一个层,将 input 空间给包裹起来,然后将控件相对定位,将包裹的层,例如 a 绝对定位到控件之上,并且给其样式,可以使用 span 或者 a 元素,由你喜欢,但是为了兼顾 IE6 ,还是用 a 比较好,因为 a 可以在 IE6 下产生 手型 的鼠标样式。所以这里就拿 a 来举例,span 或者其他的,就自己发挥吧。

先看图。

那么接下来,就看代码了。

先是结构

1
2
3
4
5
	<input type="text" id="a" readonly="readonly" />
	<a href="javascript:void(0);" class="input">
		浏览
		<input type="file" id="file">
	</a>

此处第一个 input 为模仿 文件路径的输入框,使用 javascript 在选择完成之后,把文件路径填到此处。第二个 a 标签模仿控件,第三个 input 是实际起作用的控件,只不过隐藏了而已。

然后是 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
a.input {
	width:100px;
	height:25px;
	line-height:25px;
	background:#08f;
	text-align:center;
	display:inline-block;/*具有行内元素的视觉,块级元素的属性 宽高*/
	overflow:hidden;/*去掉的话,输入框也可以点击*/
	position:relative;/*相对定位,为 #file 的绝对定位准备*/
}
a.input:hover {
	background:#f80;
}
a{
	text-decoration:none;
	color:#FFF;
}
#file {
	opacity:0;/*设置此控件透明度为零,即完全透明*/
	filter:alpha(opacity=0);/*设置此控件透明度为零,即完全透明针对IE*/
	font-size:100px;
	position:absolute;/*绝对定位,相对于 .input */
	top:0;
	right:0;
}

然后是 javascript 代码,此处给了 原生的 javascript 和 jQuery 方式。

原生 javascript

1
2
3
4
5
6
7
8
<script type="text/javascript">
	var input1 = document.getElementById("file");// 获得控件对象
	input1.onchange = inputPath; //当控件对象 input1 有变化时执行函数 inputPath
	function inputPath() {
		var input2 = document.getElementById("a"); // 获取 input 对象 input2
		input2.value=input1.value;  // 将控件 input1 的值赋给 input2 
	}
</script>

jQuery 方式

1
2
3
4
5
6
7
<script type="text/javascript">
$(function(){
	$("#file").change(function(){  // 当 id 为 file 的对象发生变化时
	        $("#a").val($("#file").val());  //将 #file 的值赋给 #a 
	})
})
</script>

OK,打完收工.

对,还有演示呢: