Bootstrap 5 不美化 input[type="file"] 是设计取舍，因安全限制和跨浏览器差异；直接加 .form-control 或 .btn 无效，须隐藏原生 input 并用自定义 UI 模拟，且禁用已废弃的 .custom-file。
Bootstrap 5 不给 做任何默认美化——它就按浏览器原生样式渲染，和 .form-control 完全不搭。这不是 bug，是明确的设计取舍：安全限制多、跨浏览器行为差异大，干脆不封装。
为什么直接加 .form-control 或 .btn 没用
原生 对大多数 Bootstrap 类无响应：.form-control 不缩放、不继承颜色/边框/圆角；.btn 不触发点击逻辑；加了也白加。
- 浏览器会忽略大部分 CSS 样式（比如
width、height、border） -
display: none在 IE11 和部分移动端会彻底禁用选择功能 - 无障碍支持（screen reader）会丢失，除非手动补
aria-describedby和id关联
必须隐藏原生 input + 自定义 UI 的三步法
核心思路：用 CSS 隐藏真 input，用按钮+文本模拟外观，JS 绑定交互。这是唯一稳定、可访问、兼容 BS5 的方案。
- 隐藏方式推荐用
position: absolute; clip: rect(0 0 0 0);或opacity: 0; width: 1px; height: 1px; overflow: hidden;（比display: none安全） - 按钮点击时调用
document.getElementById('file-input').click()，不能靠label[for]—— iOS Safari 点击区域容易失效 - 监听
change事件取e.target.files[0]?.name，别用.value（Chrome 返回C:\fakepath\xxx） - 多文件场景记得检查
files.length > 1，拼接显示如xxx.jpg +2个文件
别碰 custom-file（已废弃）
.custom-file 在 Bootstrap 5 中已被官方移除，文档标注为 “Deprecated since v5.0.0”。继续用会出问题：
- 样式错位：比如
.custom-file-label宽度不随父容器收缩，.form-floating下完全失灵 - 移动端点不中：iOS Safari 上点击区域缩小到不可靠程度
- 没有维护：连 class 名都可能在 patch 中被覆盖，别指望 CSS 兼容层能撑住长期迭代
复杂点不在 JS 逻辑，而在细节：比如清空文件后 UI 要同步重置（input 本身无法通过 JS 清空 files，得用 input.value = '' 触发重置），还有 aria 属性漏一个，屏幕阅读器用户就卡在那儿了。
