Bootstrap 4 无法直接修改 input[type="file"] 按钮文字，因浏览器将其渲染为不可样式化的原生控件；value 只读、placeholder 无效、伪元素不可作用于内部按钮。官方推荐 .custom-file 结构：隐藏原生 input，用 <label> 和 <span> 模拟可定制 UI，并通过 for 属性或嵌套触发选择逻辑。
Bootstrap 4 本身不提供直接修改 <input type="file"> 按钮文字的 API，原生控件的「选择文件」文本由浏览器渲染、不可通过 value 或 placeholder 修改。必须用 CSS 隐藏原生控件 + 自定义 DOM 元素模拟交互。
为什么不能直接改 input[type="file"] 的按钮文字
所有主流浏览器（Chrome/Firefox/Safari/Edge）都将 input[type="file"] 渲染为不可样式化的原生控件；value 属性只读，placeholder 不生效，伪元素如 ::before/::after 也无法作用于其内部按钮区域。
.custom-file 结构是 Bootstrap 4 官方推荐的自定义方案
它用包裹结构分离「视觉层」和「功能层」：隐藏原生 input，用 <label> 和 <span> 构建可样式化 UI，并靠 for 或嵌套关系触发选择逻辑。
- 必须使用
<div class="custom-file">作为最外层容器 - 内部
<input type="file" class="custom-file-input">必须存在且不可移除 -
<label class="custom-file-label">必须显式设置for属性（值为 input 的id），或让input成为其子元素 -
<span>或其他内联元素放在label内，用于显示自定义文本（如「点击上传 PDF」）
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">
<span>? 上传合同扫描件（PDF/ JPG）</span>
</label>
</div>
常见错误：CSS 隐藏失效或点击无响应
容易忽略的关键点：
-
.custom-file-input必须加position: absolute; left: -9999px或opacity: 0，但不能用display: none或visibility: hidden—— 否则失去可访问性和点击穿透能力 -
.custom-file-label默认有pointer-events: none（Bootstrap 4.3+），需手动覆盖为pointer-events: auto - 若用
for关联，input的id和label的for值必须完全一致（含空格、大小写） - 不要给
label设z-index负值，否则可能被其他元素遮挡
动态更新显示文本需要监听 change 事件
用户选中文件后，想把「上传合同扫描件」变成「已选：contract.pdf」，不能靠 CSS 实现，得用 JS：
document.getElementById('customFile').addEventListener('change', function(e) {
const fileName = e.target.files[0]?.name || '未选择文件';
const label = document.querySelector('.custom-file-label span');
if (label) label.textContent = `✅ 已选：${fileName}`;
});
注意：e.target.files 是实时的 FileList，为空说明用户取消了选择；不要依赖 this.value，它在不同浏览器中返回格式不一致（如 Chrome 返回 C:\fakepath\...）。
真正麻烦的是兼容性细节：比如 Safari 对 pointer-events: auto 在 label 上的支持较晚，旧版 IE 完全不支持 .custom-file；如果项目还要支持 IE11，得降级回绝对定位 + button 包裹方案 —— 那就不是纯 CSS 能解决的了。
