不能直接通过CSS修改input[type="file"]的“选择文件”按钮文本，因为这是浏览器硬编码的不可样式化系统控件，不支持伪元素、字体继承或value覆盖；可行方案是隐藏原生控件并用label替代，配合JS监听change事件动态更新显示文字。
不能直接通过 CSS 修改 input[type="file"] 的“选择文件”按钮文本——这是浏览器硬编码的 UI 字符串，任何 CSS（包括 ::before、::after、content 或 font 相关属性）都无效。
为什么改不了“选择文件”这四个字？
所有主流浏览器（Chrome、Firefox、Safari、Edge）都将 input[type="file"] 的按钮文案视为不可样式化系统控件的一部分。它不响应伪元素、不继承父级字体、不支持 value 覆盖，甚至 title 属性也只影响 tooltip，不影响按钮文字。
常见错误尝试包括：
- 给
input加::after { content: "上传图片"; }→ 无效果（input[type="file"]不支持伪元素） - 用 JS 改
input.value或input.placeholder→ 无效（该类型 input 没有 placeholder，value 是只读假路径） - 试图用
label文本覆盖按钮区域 → 若未隐藏原生控件，会出现双文本重叠或错位
真正可行的方案：用 label 替代视觉按钮
核心思路是隐藏原生控件，用 label 充当可完全自定义的“按钮”，点击时触发原生控件的 click() 行为。
立即学习“前端免费学习笔记（深入）”；
- HTML 必须配对：
<input id="upload" type="file">+<label for="upload">? 上传证件照</label> - CSS 隐藏原生控件：
#upload { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }（避免display: none导致 Safari 失效） - label 可加 Bootstrap 类：
<label for="upload" class="btn btn-outline-primary">? 自定义文字</label>，它会正常响应 hover/focus/disabled 状态 - 若需禁用状态，给
label加disabled属性，并补上pointer-events: none; opacity: .6;（Bootstrap 5 的.disabled类不自动作用于label）
监听 change 后动态更新显示文字（进阶需求）
用户选中文件后，你想把按钮文字从“? 上传证件照”变成“✅ 已选：身份证.jpg”，就得靠 JS 监听并手动更新 label 内容：
const input = document.getElementById('upload');
const label = document.querySelector('label[for="upload"]');
input.addEventListener('change', () => {
if (input.files.length > 0) {
const name = input.files[0].name.length > 12
? input.files[0].name.slice(0, 9) + '...'
: input.files[0].name;
label.textContent = `✅ 已选：${name}`;
} else {
label.textContent = '? 上传证件照';
}
});
注意：别读 input.value，它返回的是 C:\fakepath\... 这类不可靠字符串，且在 Safari 和旧版 Edge 中为空。
最易被忽略的一点：如果你用的是表单提交（非 AJAX），且需要服务端接收多个文件，务必确保 input 有 multiple 属性和正确的 name（如 name="files"），否则后端（如 Express/Flask/Django）只能拿到第一个文件——这是隐藏控件后最容易漏掉的语义一致性问题。
