默认的input[type=file] 是不太好看的,通过css修改默认的样式
<a class="a_pic" href="javascript:void(0);">
<span><em>+</em>添加图片</span>
<input class="file_review" title="支持jpg、jpeg、gif、png格式" name="pic">
</a>
加上css样式
*{margin:0;padding:0;}
a{text-decoration:none !important;}
.a_pic{
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;
}
.a_pic span{display: block;line-height: 39px;}
.a_pic em {
background:url(./images/add.png) 0 0;
display: inline-block;
width: 18px;
height: 18px;
overflow: hidden;
margin: 10px 5px 10px 0;
line-height: 20em;
vertical-align: middle;
}
.a_pic:hover em{background-position:-19px 0;}
.file_review {
display: block;
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 39px;
font-size: 100px; /* 增大不同浏览器的可点击区域 */
opacity: 0; /* 实现的关键点 */
filter:alpha(opacity=0);/* 兼容IE */
}
原创文章,转载请注明: 转载自HSBLOG
本文链接地址: css美化input[type=file]样式