Bootstrap 5 聚焦光晕由 box-shadow 实现而非 outline，应覆盖 .form-control:focus 的 box-shadow 并加 !important；需注意深色模式适配、框架组件样式穿透及可访问性保留。
修改 form-control 聚焦时的蓝色光晕（Bootstrap 5）
bootstrap 5 默认用 box-shadow 实现 :focus 光晕，颜色来自 $primary，宽度和模糊度由 $form-control-focus-box-shadow 控制。直接覆盖 css 变量最稳妥，避免被框架后续规则覆盖。
- 推荐在自定义 CSS 文件末尾或
<style></style>块中重写:focus样式，且加!important（Bootstrap 的原生规则优先级高） - 关键属性是
box-shadow，不是outline——Bootstrap 已移除 outline，改用 shadow 模拟光晕 - 若只改颜色不改形状，可只覆盖
--bs-form-control-focus-box-shadowCSS 变量，但需确保它在:focus选择器内生效（部分版本需手动绑定）
.form-control:focus {
box-shadow: 0 0 0 0.25rem rgba(255, 105, 180, 0.25) !important;
}
为什么 outline: none 不起作用？
因为 Bootstrap 5 的 .form-control:focus 根本没用 outline，它靠 box-shadow 实现视觉焦点。强行设 outline: none 不会消除光晕，反而可能让焦点状态失去可访问性提示。
- 禁用
outline是旧版 Bootstrap（v3/v4）常见操作，v5 已弃用该模式 - 如果同时写了
outline: none和自定义box-shadow，要确认后者没有被其他规则（如.was-validated或:focus-visible）覆盖 - 屏幕阅读器依赖
:focus状态，删掉所有焦点样式会降低可访问性；建议保留视觉反馈，仅调整颜色/大小
兼容深色模式下光晕发灰？
默认 $form-control-focus-box-shadow 基于浅色主题变量生成，深色模式下若未重写 CSS 变量，rgba 值中的透明度会让光晕显得浑浊。
- 检查是否用了
@media (prefers-color-scheme: dark)重置--bs-form-control-focus-box-shadow - 深色背景上推荐提高 color 亮度（如
rgba(139, 195, 74, 0.3)）并略微加大0.25rem的 spread 值，增强对比 - 不要依赖
color-mode类自动切换——Bootstrap 5.3+ 才原生支持，老项目需手动监听并切换 class
@media (prefers-color-scheme: dark) {
.form-control:focus {
box-shadow: 0 0 0 0.25rem rgba(139, 195, 74, 0.3) !important;
}
}
Vue/React 组件里光晕失效？
框架组件（如 <b-form-input></b-form-input> 或 <form.control></form.control>）可能封装了原生 input，但焦点事件未透传，或样式作用域隔离导致自定义 CSS 未命中。
- 先用浏览器开发者工具检查真实渲染出的元素类名，确认是否仍是
form-control，还是被包裹在div内部 - 在 Vue 中尝试
::v-deep(.form-control:focus)（或/deep/，取决于 vue-loader 版本）；React 中用className强制添加 class 并单独写样式 - 若用
input原生标签 +class="form-control"，则无需额外处理；问题多出在 UI 库二次封装层
