修改文件选择框input type=file的样式

winney07

已于 2023-07-20 14:44:33 修改

阅读量2.8k

点赞数 4

文章标签： css html 前端

于 2023-07-12 16:35:20 首次发布

本文链接：https://blog.csdn.net/winney07/article/details/131682011

版权

文件选择框(input type=“file”)的默认样式跟项目中的样式不是很搭，所以需要修改文件选择框的样式。

效果图：
在这里插入图片描述

方式一，使用::file-selector-button

HTML：

<input type="file" id="default-btn">

CSS：

#default-btn::file-selector-button{
    padding: 6px 10px;
    background-color: #1E9FFF;
    border: 1px solid #1E9FFF;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
}

这种方法，文件选择框右侧默认就显示“未选择文件”的文字。如果您想隐藏这些文字，可以设置选择框input元素的font-size：0，即：

#default-btn{
    font-size: 0;
}

了解更多关于::file-selector-button

方式二，使用label标签

HTML：

<span>
    <label for="fileInput" class="input-button" title="选择您的头像图片进行上传">选择文件</label>
    <input id="fileInput" type="file" style="display: none;">
</span>
<span id="fileName"></span>

CSS：

.input-button {
    display: inline-block;
    padding: 6px 10px;
    background-color: #1E9FFF;
    border: 1px solid #1E9FFF;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
}

方式三，使用相对定位+透明

HTML：

<span class="inputBtn">
    <span>选择文件</span>
    <input class="inputFile" type="file" id="myImg" name="myImg" title="选择您的头像图片进行上传">
    </span>
<span id="fileName"></span>

CSS：

.inputBtn {  
    position: relative;  
    display: inline-block;  
    padding: 6px 10px;  
    border: 1px solid #1E9FFF;  
    border-radius: 3px;  
    background-color: #1E9FFF;  
    cursor: pointer;  
    font-size: 12px;  
    color: #fff;  
}  
.inputBtn:hover{  
    border: 1px solid #3aa9fb;  
    background-color: #3aa9fb;  
}  
.inputFile {  
    position: absolute;  
    left: 0;  
    top: 0;  
    width: 100%;  
    height: 100%;  
    opacity: 0;  
    filter: alpha(opacity=0);  
}

方法三无法修改鼠标移上去时的手势，即input框设置为`cursor: pointer`不生效。因为方法三是将input框的透明度设置为0，实际上还是在按钮上方的。如果项目没有要求鼠标移上去时的手势，就忽略这个问题。

显示上传文件的文件名称：

针对方法二和方法三

效果图：
在这里插入图片描述

默认的文件选择框上传完文件之后，在右侧会显示上传文件的文件名称。如果需求需要显示，则可以按以下方式实现，如果不需要可忽略。

const myImgEL = document.getElementById('myImg');  
const fileNameEL = document.getElementById('fileName');  
myImgEL.addEventListener('change', (event) => {
    // event.target.value的值打印是C:\fakepath\head.jpg
    // var name = event.target.value.split('\\')[2];	// 这种方式也可以  
    // console.log(name);
    const fileName = event.target.value.match(/[^\\|/]*$/)[0];
    console.log(fileName)
    fileNameEL.innerHTML = fileName;
});