更改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>

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值