更改html中上传文件样式

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>