如何修改file控件

在移动web开发过程中，常常会用到input file这控件，但css不能修改其样式往往让开发者很头疼，直接把他放到页面上又不美观；

下面介绍的方法，可以将该控件的显示样式替换成一个图标；

 

该方法主要思路是：在带有input file的表单外面增加一个<a>标签，设置<a>标签的背景，并用透明度隐藏input标签。

在页面上显示的效果如下图，经测试ios5+，android2.3+的自带浏览器都较好的兼容该效果。

 

 

 

代码如下：

HTML

 View Code HTML

 

<a class="fileStyle" href="javascript:;">
<input class="“upload_file&quot;" id="addfile" type="file" accept="image/*" />
</a>

 

CSS

 View Code CSS

 

.messagePlan .imgUpload .fileStyle {
	width: 60px;
	height: 60px;
	background: url(../../images/addImg.jpg) #fff center center no-repeat;
	float: left;
	border: 2px dashed #ccc;
	border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	cursor: pointer;
	overflow:hidden;
	display:block;
	position:relative;
}
.upload_file{
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	bottom:0;
}