直接覆盖 --bs-form-control-focus-box-shadow 变量最有效，Bootstrap 5.3+ 已将其作为 CSS 自定义变量统一控制所有表单控件的:focus-visible 阴影效果，需确保 CSS 加载在 Bootstrap 主样式之后，并适配深色模式与 navbar 裁剪问题。
直接覆盖 --bs-form-control-focus-box-shadow 变量最有效
Bootstrap 5.3+ 已将聚焦阴影抽为 CSS 自定义变量，改 --bs-form-control-focus-box-shadow 就能一并影响所有 .form-control、.form-select、.form-check-input 等组件的:focus-visible状态。不用写一堆选择器，也不用担心漏掉某类表单控件。
必须确保你的 CSS 加载在 Bootstrap 主样式之后，否则变量会被重置。推荐放在 <style></style> 块末尾或独立 CSS 文件的最后：
:root {
--bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(106, 90, 205, 0.25);
}
- RGBA 第四个参数（透明度）建议保持
0.25左右：太低看不见，太高像荧光笔 - 这个变量只控制 box-shadow，
--bs-form-control-focus-border-color是备用项——当 border 显式存在且未被阴影完全遮盖时才可见 - 如果项目用的是 Bootstrap 5.2 或更早版本，该变量不存在，需退回到
.form-control:focus-visible选择器覆盖
.form-control:focus-visible 覆盖失效的常见原因
只写 .form-control:focus 往往无效，因为现代浏览器默认启用 :focus-visible 以提升键盘可访问性，而 Bootstrap 5 的核心规则正是基于它。
以下写法才能真正命中：
.form-control:focus-visible {
box-shadow: 0 0 0 0.25rem rgba(106, 90, 205, 0.25) !important;
border-color: #6a5acd !important;
}
- 必须加
!important——Bootstrap 原生规则带!important，不加会被覆盖 - 别漏掉
:focus-visible；仅写:focus在键盘 tab 导航时无反馈，违反 WCAG - 某些封装组件（如 React-Bootstrap 的
<form.control></form.control>）会把原生<input>包在 div 里，导致选择器无法穿透，此时要升级选择器权重：.my-form .form-control:focus-visible
深色模式下聚焦光晕发灰？不是颜色错，是透明度没调
默认 rgba(13, 110, 253, 0.25) 在深色背景上对比度不足，看起来像脏灰边，不是变量没生效。
正确做法是用 @media (prefers-color-scheme: dark) 单独重写，提高亮度和透明度：
@media (prefers-color-scheme: dark) {
:root {
--bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(139, 195, 74, 0.3);
}
}
- 避免直接用
hsl()或纯白——浅色在深背景上易眩光，选中等饱和度的青绿、琥珀或洋红更稳妥 - spread 值（
0.25rem）可微调至0.28rem，增强视觉分离感 - 不要依赖
.dark类自动切换——Bootstrap 5.3+ 才原生支持data-bs-theme="dark"，老项目必须手动监听prefers-color-scheme
Navbar 里搜索框聚焦边框被裁掉？优先检查 overflow: hidden
导航栏默认带 overflow: hidden，box-shadow 外扩部分会被直接截断，看着像“没聚焦”或“边框变细”。
解决路径很明确：
.navbar .form-control:focus-visible {
position: relative;
z-index: 2;
box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}
-
position: relative+z-index是关键，否则 shadow 仍被父容器层叠遮挡 - 必须加
.navbar前缀——否则权重和 Bootstrap 默认规则相同，后加载者胜出，但 navbar 内部规则可能更早执行 - 如果用了
.navbar-dark，注意它的$primary被设为浅灰（如#f8f9fa），会导致聚焦色天然发灰，此时应单独写.navbar-dark .form-control:focus-visible强制指定高对比色
:focus-visible、排查父容器裁剪。最难的不是写代码，是打开 DevTools 看 computed styles 里哪条 box-shadow 被划掉了——那才是真正的拦路虎。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
