html-input-file
demo : http://jsfiddle.net/dipaks2011/2JJsH/14/
http://qianduanblog.com/1174.html
http://dipaksblogonline.blogspot.hk/2012/07/styling-input-type-file.html
*{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 */
}
<form><a class="btn_addPic" href="javascript:void(0);">
<span><em>+</em>Upload</span>
<input class="filePrew" title="支持jpg、jpeg、gif、png格式,文件小于5M"
tabindex="3" name="pic" size="13" type="file" value="abcd"></a>
</form>
沒有留言:
張貼留言