开发需求上传文件给后台,而<input type="file">
样式在不同浏览器上的兼容惨不忍睹,特意写下此贴以便日后参考。
HTML如下:
<a class="fileOne" href="#">
<span>选择照片</span>
<input class="fileTwo" type="file">
</a>
CSS如下:
.fileOne{
display: block;
position: relative;
width: 70px;
height: 20px;
overflow: hidden;
border: .1px solid #666;
background: none repeat scroll 0 0 #e5e5e5;
color: black;
cursor: pointer;
text-align: center;
text-decoration:none;
font-size: 12px;
margin-top: 10px;
}
.fileOne span{
display: block;
line-height: 20px;
}
.fileTwo{
display: block;
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 20px;
font-size: 100px; /* 增大不同浏览器的可点击区域 */
opacity: 0; /* 实现的关键点 */
filter:alpha(opacity=0);/* 兼容IE */
}