上传⽂件控件的样式美化
实现原理：
第⼀步：分别建⼀个input[type=text]、⼀个input[type=button]标签，优化样式；
第⼆步：把input[type=file]标签，设置透明，位置对齐以上的两个标签并位于其底部；
第三步：⽤jquery实现把input[type=file]的⽂字显⽰在input[type=text]框内。
html：
<div class="uploader">
<input class="fileName" type="text" readonly="readonly">
<input class="upload_btn" type="button" value="Browse">
<input type="file">
<div class="clearfix"></div>
</div>
css：
<style type="text/css">
.clearfix{clear: both;}
input{margin:0;}
.uploader{
position: relative;
width:400px;
overflow:hidden;
}
.fileName{
border:1px solid #a6a6a6;
height:26px;
padding:2px 10px;
float:left;
width:80%;
box-sizing:border-box;
text-overflow:ellipsis;
border-right:0;
}
.upload_btn{
border:1px solid #71b5e0;
height:26px;
padding:2px 10px;
float:left;
inputtypefile不上传文件
width:20%;
box-sizing:border-box;
color:#333;
/*渐变背景⾊*/
background: -webkit-linear-gradient(#fff,#c9e4f5);
background: -moz-linear-gradient(#fff,#c9e4f5);
background: -o-linear-gradient(#fff,#c9e4f5);
background: linear-gradient(#fff,#c9e4f5);
background: -webkit-gradient(linear,left top,left bottom,color-stop(#fff),color-stop(#c9e4f5));/*chrome 4.0-9.0*/ filter: progid:adient(startColorstr='#FFF', endColorstr='#c9e4f5');/*ie9.0以下*/ }
.uploader:hover .upload_btn{
box-shadow:0 0 2px #bedef2 inset;
/*渐变背景⾊*/
background: -webkit-linear-gradient(#c9e4f5,#fff);
background: -moz-linear-gradient(#c9e4f5,#fff);
background: -o-linear-gradient(#c9e4f5,#fff);
background: linear-gradient(#c9e4f5,#fff);
background: -webkit-gradient(linear,left top,left bottom,color-stop(#c9e4f5),color-stop(#fff));/*chrome 4.0-9.0*/ filter: progid:adient(startColorstr='#c9e4f5', endColorstr='#fff');/*ie9.0以下*/
}
input[type=file]{
position:absolute;
left: 0;
top: 0;
bottom: 0;
right:0;
width:100%;
height:22px;
padding:4px 10px;
cursor: pointer;
filter:alpha(opacity:0);/*IE8以下*/
opacity:0;
}
</style>
Jquery：
<script>
$("input[type=file]").change(function(){
var x=$(this).val();
$(this).parent(".uploader").find(".fileName").val(x);
})
$("input[type=file]").each(function(){
$(this).parent(".uploader").find(".fileName").val("No "); })
</script>
运⾏结果：
美化前的默认样式：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。