如何更简单地更改 input type=file 文件选择框的样式_input file 输入文件框调整-优快云博客

本文链接：https://blog.youkuaiyun.com/Android_boom/article/details/129023697

文章介绍了如何通过CSS和HTML结构来自定义<inputtype=file>元素的样式，以适应网页主题。通常采用隐藏原生文件选择框，用<label>元素模拟，并监听change事件显示文件信息。新的方法是利用CSS伪元素::file-selector-button进行样式定制，但需注意IE浏览器的私有语法::-ms-browse。文章还提及Vue开发的知识点总结资源。

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

介绍

HTML 原生的 <input type="file"> 文件选择框元素样式在各个浏览器上面由用户代理默认设置样式，如果在页面上应用了其他颜色或主题时，我们通常也相应的更改这些输入框或按钮的颜色或背景，否则会出现颜色与背景或主题不融入的样式不一致问题。

通常的做法是隐藏文件选择输入框，然后使用 <label> 元素模拟文件选择框，点击 <label> 元素就会自动触发文件选择输入框的点击选择行为，再通过监听文件选择框的 change 事件还可以将文件信息显示在页面上。HTML 结构示意如下：

<body><label for="fileInput">Choose a file to upload</label><input id="fileInput" onchange="updateFileList(this)" type="file" multiple><ul id="fileList"></ul>
</body>
<script> function updateFileList(fileInput) {while (fileList.firstChild) fileList.removeChild(fileList.firstChild);var curFiles = fileInput.files;if (!(curFiles.length === 0)) {[].forEach.call(curFiles, function(file) {var listItem = document.createElement('li');listItem.textContent = 'File name: ' + file.name + '; file size ' + returnFileSize(file.size) + '.';fileList.appendChild(listItem);});}}function returnFileSize(number) {if (number < 1024) {return number + 'bytes';} else if (number >= 1024 && number < 1048576) {return (number / 1024).toFixed(1) + 'KB';} else if (number >= 1048576) {return (number / 1048576).toFixed(1) + 'MB';}} </script>
<style> button, label, input {display: inline-block;padding: .5em 1em;}input[type=file] {display: none;}label[for=fileInput] {background: linear-gradient(to bottom, #eee, #ccc);} </style>

这种方式虽然比较繁琐，但是可以定制更多内容，并且兼容 IE。

CSS 伪元素 ::file-selector-button

Chrome 89 开始支持，目前除了 IE，其他各浏览器都已支持，匹配 <input type="file"> 元素上的按钮，兼容写法为 ::-webkit-file-upload-button。通过伪元素 ::file-selector-button 定制文件选择框的样式更加简单了：

<body><input type="file" multiple>
</body>
<style> /* 后面的提示文字颜色 */[type=file] {color: red;/* font-size: 0; */}/* 主按钮的样式自定义 */::file-selector-button {height: 3rem;color: #fff;border-radius: .25rem;border: 1px solid #2a80eb;padding: .75rem 1rem;background-color: #2a80eb;cursor: pointer;}::-ms-browse {height: 3rem;color: #fff;border-radius: .25rem;border: 1px solid #2a80eb;padding: .75rem 1rem;background-color: #2a80eb;cursor: pointer;} </style>

IE 浏览器（IE10+）也支持对文件选择框样式自定义，但是使用的是私有的 ::-ms-browse 伪元素。另外，如果希望隐藏按钮后面的“未选择任何文件”的文字，只需对当前 <input> 元素设置样式 font-size: 0 即可。