bootstrap 5 中不存在 .focus-ring 类，实际使用 :focus-visible 伪类和 .focus-visible 类实现键盘焦点样式；聚焦光晕由 box-shadow 控制而非 outline，需覆盖 .form-control:focus 的 box-shadow 并适配深色模式。
Bootstrap 5 的 .focus-ring 根本不存在
你搜到的 .focus-ring 类，大概率是混淆了社区术语和 Bootstrap 5 实际实现。Bootstrap 5 官方 CSS 中没有定义 .focus-ring 这个类名——它不生效，也不参与任何样式逻辑。真正起作用的是 :focus-visible 伪类，配合 .focus-visible（手动添加）或原生支持的可聚焦元素（如 <button></button>、<a></a>、<input>）。如果你写了 .focus-ring:focus 却没效果，不是选择器写错，而是这个类压根没被 Bootstrap 声明过。
.form-control:focus 才是控制光晕的正路
Bootstrap 5 改用 box-shadow 模拟焦点环，完全弃用了 outline。所以改边框颜色 ≠ 改 border-color 就完事，必须同步覆盖 box-shadow：
-
.form-control:focus必须显式声明box-shadow，否则沿用默认的rgba(13,110,253,0.25)（即$primary） - 推荐完整重写，避免只改颜色却漏掉透明层：例如
box-shadow: 0 0 0 0.25rem rgba(255, 99, 132, 0.25) !important - 如果同时想改聚焦时的边框色，加一句
border-color: rgb(255, 99, 132) !important，否则边框仍为默认灰 - 别写
outline: none——它对光晕无效，还可能干扰屏幕阅读器识别焦点状态
深色模式下光晕发灰？检查 @media (prefers-color-scheme: dark)
默认的 box-shadow 值在深色背景上容易显得浑浊，不是颜色选得不对，而是透明度和色值没适配：
- 浅色主题常用
rgba(13,110,253,0.25)，深色模式建议提高亮度与透明度，比如rgba(139, 195, 74, 0.3) - spread 值（即
0.25rem）可略加大至0.3rem，增强视觉分离感 - 务必用
@media (prefers-color-scheme: dark)包裹重写规则，且确保该媒体查询在自定义 CSS 中加载顺序靠后 - 不要依赖
.dark类自动切换——Bootstrap 5.3+ 才原生支持，老项目需手动监听并 toggle class
Vue/React 组件里光晕失效？焦点事件没透传
像 <b-form-input></b-form-input>（BootstrapVue）或 <form.control></form.control>（React-Bootstrap）这类封装组件，常把原生 <input> 包在内部，导致你的 .form-control:focus 规则无法命中：
- 检查 DevTools 的 computed styles，确认
box-shadow是否被划掉；若被划掉，说明选择器权重不够或作用域隔离 - 尝试提升选择器权重：
.my-custom-input .form-control:focus或直接用input:focus（但注意污染风险） - 在 Vue 中可通过
:class动态绑定form-control，并确保父容器未设scoped样式阻断 - React 中若用 styled-components 或 Emotion，需用
&:focus显式穿透
box-shadow 驱动，不是 outline；.focus-ring 是幻觉，:focus-visible 才是键盘焦点的真实开关；深色模式必须单独处理，不能指望一套值通吃；框架组件失效，八成是样式没打到真正的 <input> 节点上。
