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>
