开发webapp的朋友们应该对<input type=”file” />这样的表单元素不陌生吧，虽然我从来没接触过=_=。今天看到Mr.Think同学更新了一篇博客《利用label标签和CSS美化文件上传表单》，不过demo里面好像失效了……提到这里，我就把我知道的美化这样元素的方法分享一下吧。

DEMO在这里。

要说input[type=file]类型完全不支持CSS也不对，只是很多关于样式化的CSS方法对它无效，是出于安全的目的。不过position、z-index、opacity这些CSS属性还是支持的，所以就用这些方法来变通。

核心思想

其实我是把样式都加在了input[type=file]的父元素上了，当然你也可以使用它的兄弟元素等，根据项目的实际需要来定吧。然后用css把input[type=file]的透明度设置0。这样一来，虽然用户的眼睛不可见，但它还是存在于网页的那个地方，鼠标方面的交互也是可以做的。至于鼠标移入和移出时候的效果，就对其父元素指定hover状态和非hover状态时的样式。

另外，在上传按钮的交互上，IE和非IE系的不一样。IE里面，点击按钮前面的像文本框一样的部分是没用的，得点击“浏览”的按钮才会有窗口弹出。而在非IE里，点击框或者按钮都会有窗口弹出，所以为了解决在IE下的问题，使用position定位的时候，把按钮部分对准有样式的地方。图解一下（透明度非0时的状态）：

关键代码我也给一下：

/*设置input[type=file]父元素的样式*/
#input_file .right{
	float:left;
	width:100px;
	height:29px;
	margin-top:-6px;
	margin-left:10px;
	padding-top:4px;
	overflow:hidden;
	background:url(btn_bg.png) center top no-repeat;
	/*为子元素定位着想，使用relative*/
	position:relative;
}
/*鼠标在hover状态时样式的切换*/
#input_file .right:hover{
	background:url(btn_bg.png) center bottom no-repeat;
}
/*设置透明度，通用方法和IE专属方法*/
#input_file .right input{
	position:absolute;
	/*把浏览按钮置于交互中心，解决IE的问题*/
	right:0;
	opacity:0;
	filter:alpha(opacity=0);
}

已知问题

+ IE6不支持非<a>标签的hover状态，所以鼠标悬浮的交互在IE6下无法实现，完美主义者请使用JS。

+ 看上图就知道，IE上鼠标点到“浏览”按钮才会有效，所以左边的框部分点了不会有选择文件的窗口弹出，与鼠标悬浮的交互效果有些不协调，并且鼠标指针的样式无法定义。

+ 更好的交互效果？更便利的定制外观？哥们，用flash吧，CSS做不到，至少我做不到……

关于DEMO

DEMO是我写的无误，设计图是国外网站上下载的，小巧的界面有点像网盘上传的界面，有需要的同学们直接拿去吧，呵呵。