WEB开发中,不同的浏览器对于<input type="file">标签显示的样式是不一样的,可能带来不好的用户体验。下面介绍下文件上传按钮的用户自定义样式的实现方法。
1、HTML代码
<div class="new-contentarea">
<a href="javascript:void(0)" class="btn-upload-img">选择图片</a>
<input type="file" class="" name="upload-file" id="upload-file"/>
</div>
实现原理:
<a>和<input>两个元素,设置大小一致,<input>设置相对定位,top和left属性使得与<a>按钮重叠,这样便实现了用户自定义的样式。
2、CSS代码
.new-contentarea{
width: 165px;
overflow:hidden;
margin: 0 auto;
position:relative;
display: inline;
}
.btn-upload-img{
background-color: #f3fbff;
border: 1px solid #bfe2fa;
border-radius: 5px;
color: #148ed5;
display: inline-block;
font-size: 14px;
line-height: 36px;
text-align: center;
padding: 0 10px;
}
.new-contentarea input[type=file]{
background: #333 none repeat scroll 0 0;
height: 36px;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: -7px;
width: 77px;
z-index: 2;
}
同理用图片盖住上传按钮,可以实现点击图片上传文件的功能