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;
            }