本站停止维护,已转移至laravel学习网;欢迎大家移步访问!

html5 input(file)浏览按钮美化,input(file)浏览按钮美化图片上传

file样式太丑,我们怎么去美化file呢?

首先看看效果图:

直接贴代码吧:

<div class="idcardupload">
<ul>
<li class="idcard_upload">
<font>身份证正面照</font>
<input type="file" value="浏览" />
</li>
<li class="idcard_upload">
<font>身份证反面照</font>
<input type="file" value="浏览" />
</li>
<li class="idcard_upload">
<font>手持拍照</font>
<input type="file" value="浏览" />
</li>
</ul>
<span>1.请确保字体,头像清晰可见</span>
<span>2.请用本人真实有效身份证,否则无法通过审核</span>
<span>3.手持请把证件放在耳边拍照</span>
<button>提交验证</button>
</div>
<style>
.idcardupload{
width: 100%;
height: auto;
}
.idcardupload ul{
width: 96%;
margin-left: 2%;
margin-right: 2%;
margin-top: 20px;
}
.idcardupload li{
width: 29.3%;
margin-left: 2%;
margin-right: 2%;
float: left;
text-align: center;
margin-bottom: 20px;
}
.idcardupload  span{
width: 92%;
height: 20px;
line-height: 20px;
color: #B3B3B3;
padding-left:4%;
padding-right: 4%;
float: left;
}
.idcardupload  button{
width: 96%;
height: 40px;
margin-left:2%;
margin-right: 2%;
background-color: #CCCCCC;
color: #FFFFFF;
border:none;
margin-top: 30px;
font-size: 15px;
}
.idcard_upload{
display:inline-block;
width:100px;
height:100px;
background:#E6E6E6;
position:relative;
overflow:hidden;
border:dashed thin #999999;
background-image: url("/images/username.png");
background-size:50px 50px;
background-position: center 15px;
background-repeat: no-repeat;
text-align: center;
padding-top: 65px;
box-sizing: border-box;
}
.idcard_upload font{
font-size: 13px;
text-align: center;
}
.idcard_upload input{
position:absolute;
right:0;
top:0;
font-size:100px;
opacity:0;
filter:alpha(opacity=0);
}
</style>



转载请注明 :一沙网络原文出处:http://bbs.earnp.com/article/48
问题交流群 :562864481
0
打赏
发布时间 :2016-08-11 20:09:44
分享

3 个评论

  • 一沙
    回复
    2016-08-26 13:27
    这个demo中,可能会有iphone点不开上传图片页面,直接改一下背景图片,把font标签去掉就可以了!

要回复文章请先登录注册