直接修改 --bs-form-control-focus-box-shadow 变量最稳妥，但需确保在 bootstrap 主样式后加载；bootstrap 5 聚焦效果依赖两层 box-shadow 而非 border-color。
直接改 --bs-form-control-focus-box-shadow 变量最稳，但必须确保它在 Bootstrap 主样式之后加载，否则会被覆盖。
为什么只改 border-color 没用
Bootstrap 5 的聚焦高亮根本不是靠 border 实现的——它用的是两层 box-shadow：一层是带颜色的外发光（比如 rgba(13, 110, 253, 0.25)），另一层是透明补偿（0 0 0 0.25rem transparent）。视觉上你看到的“蓝边”，90% 是 shadow，不是 border。
常见错误包括：
- 只写
border-color: #dc3545，但没碰box-shadow，结果聚焦时边框色变了，光晕还是蓝的 - 误以为
:focus生效，实际浏览器触发的是:focus-visible（尤其键盘 tab 时） - 自定义 CSS 文件放在
bootstrap.css前面，变量被原值覆盖
覆盖 --bs-form-control-focus-box-shadow 的正确姿势
这个 CSS 变量控制所有 .form-control、.form-select、.form-check-input 的聚焦光晕，改一次全生效。但要注意作用域和时机：
- 全局生效：在
:root里定义，如:root { --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } - 局部生效：用更具体的选择器，比如
.navbar .form-control:focus { --bs-form-control-focus-box-shadow: ...; } - 必须确保这段 CSS 在
bootstrap.min.css或其等效文件之后加载，否则变量读取的仍是默认值 - 别漏掉
--bs-form-control-focus-border-color，虽然它次要，但在 border-width > 0 且 shadow 较淡时仍可见
在 navbar 里改不生效？大概率是容器裁剪或 z-index 遮挡
导航栏常带 overflow: hidden 和低 z-index，会把 box-shadow 的扩散部分直接切掉。不是变量没生效，是光晕被物理“剪”没了。
- 给输入框加
position: relative和z-index: 2，让它浮出父层 - 显式重写
.navbar .form-control:focus的box-shadow，而不是只靠变量——因为 navbar 的样式权重可能更高 - 深色 navbar（
.navbar-dark）下，$primary默认变浅灰，导致光晕发白发灰，建议单独写.navbar-dark .form-control:focus规则，指定高对比色如rgba(100, 200, 255, 0.3)
用 Sass 编译项目时，优先改变量而非覆盖 CSS
如果你控制源码且用 Sass，直接在引入 Bootstrap 前覆写变量，比后期 CSS 覆盖干净得多：
$primary: #6f42c1; $form-control-focus-box-shadow: 0 0 0 0.25rem rgba($primary, 0.25); @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/forms";
这样所有依赖该变量的组件（开关、下拉、校验态）都会自动同步更新，不用一个个 selector 去补。
真正容易被忽略的点是：深色模式下，prefers-color-scheme: dark 不会自动切换 --bs-form-control-focus-box-shadow，除非你手动加媒体查询重置——否则用户切到暗色模式，光晕还是浅色主题那套，糊成一片灰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
