CSS美化 input type=”file” 兼容所有浏览器

出处：http://www.aiubug.com/?p=22

demo:http://aiubug.com/wp-content/uploads/demo/input-file-style.html

效果：

 

HTML

<form>
<a class="btn_addPic" href="javascript:void(0);">
<span><em>+</em>添加图片</span>
<input class="filePrew" title="支持jpg、jpeg、gif、png格式，文件小于5M" tabindex="3" type="file" name="pic" size="3">
</a>
</form>  

CSS

*{margin:0;padding:0;}  
a{text-decoration:none;}  
.btn_addPic{  
display: block;  
position: relative;  
width: 140px;  
height: 39px;  
overflow: hidden;  
border: 1px solid #EBEBEB;  
background: none repeat scroll 0 0 #F3F3F3;  
color: #999999;  
cursor: pointer;  
text-align: center;  
}  
.btn_addPic span{display: block;line-height: 39px;}  
.btn_addPic em {  
background:url(http://p7.qhimg.com/t014ce592c1a0b2d489.png) 0 0;  
display: inline-block;  
width: 18px;  
height: 18px;  
overflow: hidden;  
margin: 10px 5px 10px 0;  
line-height: 20em;  
vertical-align: middle;  
}  
.btn_addPic:hover em{background-position:-19px 0;}  
.filePrew {  
display: block;  
position: absolute;  
top: 0;  
left: 0;  
width: 140px;  
height: 39px;  
font-size: 100px; /* 增大不同浏览器的可点击区域 */  
opacity: 0; /* 实现的关键点 */  
filter:alpha(opacity=0);/* 兼容IE */  
}