input[type=file]样式的修改_<input type="file" multiple=""> 修改样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_42396332/article/details/103910142

本文介绍了如何修改input[type=file]元素的默认样式，通过设置opacity为零并使用固定尺寸的覆盖元素来实现自定义样式。同时，还提到了在上传文件后更新显示文本和图片的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认样式：

<input type="file" name="files" id="uploaddocumentfile" multiple="multiple"/>

修改后样式：

将input[type=file]的opacity设置为零，点击需要执行的部分用长宽设定死覆盖，自己写样式。


<style>
    .file-btn{
        width: 72px;
        height: 32px;
        background: rgba(247,247,247,1);
        border: 1px solid rgba(230,230,230,1);
        border-radius :4px;
        color: #7A79FF;
        font-size: 12px;
        text-align: center;
        display: inline-block;
    }
    .btn-behind{
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333;
        padding-left: 8px;
    }
    #uploaddocumentfile{
        opacity: 0;
        margin-top: -30px;
        height: 120px;
        width: 70px;
    }
</style>

<div class="file-btn">选择文件
    <input type="file" name="files" id="uploaddocumentfile" multiple="multiple"/>
</div>
<div style="width: 170px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: -32px 0 0 78px;">
    <span class="file-placeholder btn-behind">暂未选择</span>
</div>
<div style="margin-top: 12px;">
    <img class="file-pic" src="../../../../assets/img/upload.png"/>
</div>
<div style="width: 78px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
    <span class="file-placeholder btn-down">暂未选择</span>
</div>

上传文件之后更改显示的文字和图片。

// 上传文件,更改显示文字
$("#uploaddocumentfile").on("change", function(){
    let file = $("#uploaddocumentfile").val();
    let pos = file.lastIndexOf("\\");
    let _name  = file.substring(pos + 1);
    if(_name != ""){
        $('.file-placeholder').html(_name);
    }
    $(".file-pic").css("content", 'url("../../../../assets/img/file.png")');
    $(".file-pic").css("padding", '8px');
});