HTML:
<input type="file" name="input" id="input" accept="application/pdf">
默认样式:
通过css、js对上面的样式进行更改,得到:
其中CSS、HTML、JS代码如下:
HTML:
<div class="input-file">
<form action="input.html" method="get" enctype="multipart/form-data">
<input type="text" id="avatval" placeholder="请选择文件···" readonly="readonly" style="vertical-align: middle;"/>
<input type="file" name="avatar" id="avatar"/>
<a href="javascript:void(0);" class="button-selectimg" id="avatsel1">选择文件</a>
</form>
</div>
CSS:
<style type="text/css">
a[class="button-selectimg"]{color:#00A2D4;padding:4px 6px;border:1px dashed #00A2D4;border-radius:2px;}
.input-file{margin:200px 300px;}
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;}
</style>
JS:
<script type="text/javascript">
$(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>