原生<input type="file">无法直接样式化，因浏览器强限制其UI（如“Choose file”文字不可选、伪元素无效），核心方案是用<label>包裹并视觉隐藏input（推荐position: absolute; left: -9999px），通过label触发选择、控制样式及显示文件名，同时保障可访问性与移动端兼容。
原生 <input type="file"> 为什么不能直接改样式？
因为浏览器对 <input type="file"> 的 UI 控制极强，border、background、padding 等常规样式大多被忽略，尤其是按钮文字部分（如 “Choose file”）完全不可选中、不可伪元素覆盖。这不是 bug，是规范行为——防止伪造文件选择框诱导用户上传恶意文件。
用 label + input[type="file"] 隐藏法实现可控样式
核心思路：把原生 input 移出视口或透明隐藏，用 <label> 关联它，点击 label 触发 file 选择；所有视觉样式都加在 label 上。
关键点：
-
<input>必须有id，<label>用for属性关联，或把<input>包在<label>内（更推荐后者，免 ID 冲突） - 隐藏 input 要用
position: absolute; left: -9999px或opacity: 0; width: 0; height: 0; overflow: hidden，**不能只用display: none或visibility: hidden**——否则会失去可访问性且部分浏览器不触发选择 - label 可任意加 class、伪元素、过渡动画，比如
::before显示图标，::after显示文件名
<label class="file-upload-btn">
<input type="file" accept=".pdf,.docx" multiple />
<span>? 上传文档</span>
</label>
<p><style>
.file-upload-btn {
position: relative;
display: inline-block;
padding: 8px 16px;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.file-upload-btn:hover { background: #0056b3; }
.file-upload-btn input {
position: absolute;
left: -9999px;
}
.file-upload-btn input:focus + span { outline: 2px solid #007bff; }
</style>如何动态显示已选文件名？
原生 input 的 files 属性是只读的，但可通过监听 change 事件读取并更新 label 内容。注意：IE10+ 支持，但 IE11 不支持 files[0].name 在某些表单重置后回退场景，建议加空值判断。
立即学习“前端免费学习笔记（深入）”；
常见错误：
- 直接操作
label.innerText覆盖了整个结构（包括 input），导致后续无法再触发选择 → 应只更新内部<span>或用data-属性存文件名 - 没处理多文件时的显示逻辑（如只显示第一个 + 数量提示）
- 未监听
input元素的change，而是监听label的 click —— 这会导致取消选择时无响应
简短 JS 示例：
const input = document.querySelector('.file-upload-btn input');
const span = document.querySelector('.file-upload-btn span');
<p>input.addEventListener('change', () => {
if (input.files.length === 0) {
span.textContent = '? 上传文档';
} else if (input.files.length === 1) {
span.textContent = '✅ ' + input.files[0].name;
} else {
span.textContent = <code>✅ ${input.files[0].name} +${input.files.length - 1} 个文件</code>;
}
});无障碍与移动端适配要注意什么？
隐藏 input 后，屏幕阅读器可能无法识别其作用。必须保留语义化信息：
- 给
<input>加aria-label（如aria-label="上传简历 PDF 文件"） - label 文本本身要有明确动词（“上传”比“选择”更准确）
- 移动端 Safari 对
click()模拟触发input[type=file]有限制，**禁止用 JS 主动调用input.click()来绕过用户手势**，否则在 iOS 16+ 会静默失败 - 安卓 Chrome 支持
capture="camera"，但仅当accept="image/*"时生效；加了这个属性后，点击会直连相机，无需样式干预
真正容易被忽略的是：文件限制（accept、multiple、max-size）必须前后端双重校验。CSS 再好看，也不能阻止用户拖入不合规文件 —— 浏览器只会静默过滤 accept 不匹配的类型，但不会报错，用户可能误以为没响应。
