正文
html中自定义上传文件的样式
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
<script>
$(function(){
$("#avatsel1").click(function(){
$("input[type='file']").trigger('click');
});
$("#avatval").click(function(){
$("input[type='file']").trigger('click');
});
$("input[type='file']").change(function(){
$("#avatval").val($(this).val());
});
});
</script>
<div class="input-file">
<input type="text" id="avatval" placeholder="请选择文件···" readonly="readonly" />
<input type="file" name="avatar" id="avatar"/>
<a href="javascript:void(0);" class="button-selectimg" id="avatsel1">选择文件</a>
</div>
a[class="button-selectimg"] {
color: #00A2D4;
padding: 4px 6px;
border: 1px dashed #00A2D4;
border-radius: 2px;
text-decoration: none;
} input[id="avatval"] {
padding: 3px 6px;
padding-left: 10px;
border: 1px solid #E7EAEC;
width: 230px;
height: 25px;
line-height: 25px;
border-left: 3px solid #3FB7EB;
background: #FAFAFB;
border-radius: 2px;
} input[type='file'] {
border: 0px;
display: none;
}
