bootstrap 5 已彻底移除 custom-file 组件，需手动隐藏原生 file input 并用按钮和文本模拟 ui，配合 js 同步状态，同时注意无障碍支持（如 aria-describedby）和兼容性处理。
Bootstrap 5 中 custom-file 组件已被彻底移除，它只存在于 Bootstrap 4 及更早版本。如果你在 Bootstrap 5 项目中尝试使用 <div class="custom-file"> 或 <code>.custom-file-input 类，这些样式不会生效，也不会被 Bootstrap 官方 CSS 支持。
所以，严格来说：
✅ Bootstrap 5 不再提供 custom-file —— 这不是你写错了，而是框架主动弃用了该组件。
❌ 不能通过引入 Bootstrap 5 的 CSS/JS 直接启用 custom-file 样式。
如何在 Bootstrap 5 中实现类似 custom-file 的美化效果？
你需要手动构建：隐藏原生 <input type="file">，再用 Bootstrap 按钮 + 文本容器模拟 UI，并用 JS 同步状态。
✅ 推荐做法（纯 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" id="file-trigger">选择文件</button>
<span id="file-name" class="text-muted">未选择</span>
</div>
<input type="file" id="file-input" class="d-none" aria-describedby="file-name">
</div>
const fileInput = document.getElementById('file-input');
const fileTrigger = document.getElementById('file-trigger');
const fileName = document.getElementById('file-name');
fileTrigger.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
fileName.textContent = file ? file.name : '未选择';
});
⚠️ 注意点：
- 不要用
display: none或visibility: hidden隐藏input[type=file]（会影响无障碍访问）；推荐用.d-none（Bootstrap 5 的display: none !important是可接受的，但需配合aria-describedby）- 必须加
aria-describedby="file-name"，让屏幕阅读器知道该输入框的状态由哪个元素描述- 若需支持 IE11，请改用
position: absolute; clip: rect(0 0 0 0);替代.d-none
❌ 为什么不能直接复用 Bootstrap 4 的 custom-file？
- HTML 结构不同（Bootstrap 4 要求
<div class="custom-file"> 包裹 <code><input>和<label></label>） - CSS 类名已删除（
.custom-file-input,.custom-file-label在 Bootstrap 5 源码中不存在） - 官方明确说明：出于维护性与安全考虑，放弃封装
<input type="file">，交由开发者自主控制 -
bootstrap-fileinput
支持 Bootstrap 5，提供图片缩略图、AJAX 上传、国际化、主题切换等功能
引入方式：<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/css/fileinput.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/fileinput.min.js"></script>
使用示例：
<input id="input-file" type="file" class="file" multiple data-preview-file-type="any"><script>$('#input-file').fileinput();</script>
✅ 替代方案（如需更强功能）
如果需要预览、拖放、多文件、进度条等，推荐使用成熟插件：
不复杂但容易忽略。
