Bootstrap 5 默认用 :focus-visible 而非 :focus 控制焦点环，仅键盘导航时触发；需覆盖 box-shadow（非 outline）并兼顾 .form-control、.nav-link 等组件的独立规则，同时保留可访问性。
为什么直接写 :focus 无效？
Bootstrap 5 默认用 :focus-visible 控制焦点环，不是传统 :focus。浏览器只在键盘导航（如 Tab）时触发 :focus-visible，鼠标点击后不会激活——所以你加了 button:focus { outline: none } 看不到效果，是因为它根本没匹配上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先覆盖
:focus-visible，不是:focus - 如果必须禁用所有焦点样式（含鼠标点击后残留），才额外加
:focus - 别漏掉
:focus-within场景（比如表单控件在div内，父元素可能被聚焦）
怎样安全移除或自定义焦点环？
Bootstrap 5 的焦点环由 box-shadow 实现（非 outline），默认是 0 0 0 0.25rem rgba(13,110,253,.25)。直接设 outline: none 不起作用，必须覆盖 box-shadow。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用更高优先级选择器，比如加
!important或写成.btn:focus-visible - 推荐方案：重置
box-shadow为none，同时保留可访问性语义（不删:focus-visible） - 若要自定义，改
box-shadow值即可，例如加粗、换色、改偏移
示例（全局禁用按钮焦点环）：
.btn:focus-visible {
box-shadow: none;
}
哪些组件需要单独处理？
Bootstrap 5 并非所有组件都用同一套焦点规则：.form-control、.nav-link、.dropdown-item、.btn 各自定义了 :focus-visible 样式，且部分还带 :focus 回退逻辑（如旧版 Safari）。不能只写一个通用规则就完事。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 中实际生效的规则，看是哪个类名+伪类在起作用
- 常见需覆盖的选择器：
.form-control:focus-visible、.nav-link:focus-visible、.dropdown-item:focus-visible - 对
input[type="checkbox"]和input[type="radio"]，它们用appearance: none+ 自绘焦点，需单独处理::after或box-shadow
兼容性和可访问性风险提醒
完全移除焦点环会损害键盘用户操作体验，WCAG 要求焦点指示必须清晰可见。Bootstrap 5 用 :focus-visible 本身就是为平衡 UX 和 a11y，粗暴全删可能让屏幕阅读器用户或键盘导航者找不到当前焦点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 测试真实键盘 Tab 导航流程，确认焦点仍可被感知
- 若设计不允许蓝环，至少提供同等视觉对比度的替代样式（如深色背景+高亮边框）
- 避免在
@media (prefers-reduced-motion: reduce)下意外禁用焦点样式——Bootstrap 5 本身已适配，但自定义 CSS 可能破坏它
最易被忽略的一点：某些第三方组件（如日期选择器、模态框内部按钮）会动态插入 DOM，它们的焦点样式可能不受你写的 CSS 影响，得用更宽泛的选择器或 !important 强制覆盖。
