上传⽂件样式美化1、点击输⼊框和上传按钮都打开任务管理器(兼容IE和⽕狐)：
HTML：
<div class="row">
<input type="text" class="fileinput" readonly="readonly"/>
<a href="javascript:void(0)" class="upload">上传</a>
<input type="file" class="file"/>
</div>
CSS：
.row{
position: relative;
}
.
fileinput{
background: #FFFFFF;
border: 1px solid #D7D7D7;
height: 24px;
padding: 6px 9px;
width: 450px;
color: #666666;
outline: none;
float: left;
}
.upload{inputtypefile不上传文件
width: 90px;
height: 38px;
line-height: 38px;
text-align: center;
background: #666A82;
border-radius: 5px;
color: #FFFFFF;
font-size: 16px;
float: right;
}
.upload:hover{
background: #76798F;
text-decoration: none;
}
.file{
position: absolute;
left: 0;
width: 570px;
top: 0;
height: 38px;
font-size/*\**/:570px\9;/*IE*/
filter: alpha(opacity=0);
opacity: 0;
cursor: pointer;
overflow: hidden;
}
JS：
$(".file").change(function(){
$(".fileinput").val($(this).val());
});
2、上传按钮打开任务管理器(兼容IE和⽕狐)：
HTML：
<a href="javascript:void(0)" class="upload">上传<input type="file"/></a>
CSS：
.upload{
width: 90px;
height: 38px;
line-height: 38px;
text-align: center;
background: #666A82;
border-radius: 5px;
color: #FFFFFF;
font-size: 16px;
display:inline-block;
position:relative;
}
.upload:hover{
background: #76798F;    text-decoration: none; }
.upload input{
position: absolute;
left: 0;
right:0;
width: 100%;
top: 0;
bottom: 0;
height: 100%;
filter: alpha(opacity=0);    opacity: 0;
cursor: pointer;
overflow: hidden;
}

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