CSS美化文件上传按钮input[type=”file”]

美化思路:
1、将input输入框及图片用div包裹起来,使其成为一个块级元素。
2、外层div使用相对定位以及设置相应的宽高。
3、input输入框使用绝对定位,也定义显示图片的宽高,并设置透明。

网页代码:

<div class="imgUploads">
	<input type="file">
	<img src="img/1.png">
</div>
CSS代码:
.imgUploads{
     position: relative;
     height: 94px;
     width: 94px;
}
input{
     height: 94px;
     width: 94px;
     position: absolute;
     top: 0px;
     left: 0;
     z-index: 9;
     opacity:0;
     filter:alpha(opacity=0);
     cursor: pointer;
}