Bootstrap 5 不为 file 输入提供默认美化样式，需手动隐藏原生 input 并用按钮和 span 模拟UI，同时注意无障碍（aria-describedby）、IE11 兼容性（禁用 display:none）及清空文件时的 UI 同步。
Bootstrap 5 中 <input type="file"> 默认样式不生效？
bootstrap 5 默认不为 <input type="file"> 提供开箱即用的美化样式——它会原样渲染浏览器原生控件，导致和 .form-control 看起来完全脱节。这不是 bug，是设计选择：文件输入涉及安全限制，bootstrap 放弃了对它的深度封装。
真正能用的方案只有手动包裹 + 隐藏原生 input + 自定义触发按钮和显示逻辑。
- 不要给
<input type="file">直接加.form-control或.btn类——它不会响应式缩放，也不会继承颜色/尺寸 - 必须用
position: absolute; clip: rect(0 0 0 0);或opacity: 0隐藏原生 input，再用其他元素模拟外观 - 别忘了加
aria-describedby和id关联，否则无障碍访问会失败
如何用 Bootstrap 组件组合实现「点击上传」+「显示已选文件名」
核心是把原生 <input type="file"> 当作“事件代理”，所有 UI 全由 Bootstrap 的 <button>、<div> 和 <span> 构建。
示例结构（纯 HTML + 少量 JS）：
<div class="mb-3">
<label class="form-label">附件</label>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-outline-secondary me-2">选择文件</button>
<span class="text-muted small" id="file-name">未选择</span>
</div>
<input type="file" id="file-input" class="d-none">
</div>
关键 JS 行为：
- 监听
file-input的change事件，取e.target.files[0]?.name更新#file-name - 点击按钮时调用
document.getElementById('file-input').click() - 如果支持多选，记得检查
files.length > 1并拼接文件名（如files[0].name + ` +${files.length-1}个文件`）
为什么不能用 custom-file（Bootstrap 4）？
因为 custom-file 在 Bootstrap 5 中已被彻底移除。官方文档明确标注为 “Deprecated since v5.0.0”。如果你在旧项目里看到它还能用，那是靠 CSS 兼容层撑着，但 class 名、结构、JS 行为都不再受维护。
继续用会导致：
- 样式错位（比如
.custom-file-label宽度不随父容器收缩） - 无法与
.form-floating或.form-control-sm正常配合 - 移动端点击区域变小，尤其在 iOS Safari 上容易点不中
迁移建议：直接按上一节方式重写，别试图 patch custom-file 的 CSS。
IE11 兼容或需要表单提交时的注意事项
如果仍需兼容 IE11，或依赖传统表单 submit（而非 AJAX），注意两点：
- 隐藏原生 input 时，**不能用
display: none或visibility: hidden**——IE11 下它们会让input被忽略，导致 submit 时无文件字段 - 推荐用
position: absolute; left: -9999px;或width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; - 若用了
multiple，后端接收时要检查是否为数组（如 Express 的req.files?.myFile可能是单文件对象或数组）
最易被忽略的是：当用户取消选择（清空 input）后，files.length 为 0，但 UI 上的文件名没同步清空——这需要显式监听 change 并判断 files.length === 0 来重置提示文本。
