应直接设置 CSS 变量 --bs-form-control-focus-box-shadow，格式为“0 0 0 0.25rem rgba(r,g,b,a)”，确保扩散半径 0.25rem 不缺失；SCSS 中可重定义 $form-control-focus-box-shadow 变量；需检查真实 DOM 结构与变量名拼写。
如何修改 Bootstrap 表单控件 focus 时的 box-shadow 颜色
Bootstrap 默认用 box-shadow 实现输入框聚焦高亮，但颜色由主题色（$primary）决定，不能直接通过 class 切换。想自定义阴影颜色，必须覆盖 CSS 变量或重写伪类样式。
修改 :focus 状态下的 box-shadow 值
Bootstrap 5+ 使用 CSS 变量控制 focus 样式，关键变量是 --bs-form-control-box-shadow 和 --bs-form-control-focus-box-shadow。直接在元素上设置这些变量最稳妥：
<input type="text" class="form-control" style="--bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(255, 105, 180, 0.25);">
- 该值格式必须严格匹配：
0 0 0 0.25rem rgba(r,g,b,a)，否则阴影失效 - 不要只改颜色而漏掉
0.25rem这个扩散半径，否则看起来像边框而非阴影 - 若用 SCSS，可在自定义主题中重设变量：
$form-control-focus-box-shadow: 0 0 0 $form-control-focus-width rgba($pink, .25);
为什么加 !important 通常没必要，但有时会失效
Bootstrap 的 focus 样式通过 :focus 伪类 + box-shadow 设置，权重已较高。强行加 !important 很可能是因为：
- 你写的样式放在了 Bootstrap CSS 加载之前，被覆盖了
- 用了错误的选择器，比如写成
.form-control:focus-within（不存在该伪类） - 目标元素被封装在第三方组件里（如 Vue 的
<b-form-input></b-form-input>），实际渲染 DOM 结构不同，需 inspect 确认真实 class 和层级
注意 input、select、textarea 的处理一致性
三者默认共享同一套 focus 样式变量，但 select 在某些浏览器（尤其是 Safari）中 box-shadow 渲染异常：
- 建议统一用
[class*="form-control"]或input, select, textarea批量设置变量 - 若
select仍不生效，可加appearance: none并手动补全箭头图标，避免原生控件干扰 - 禁用状态（
disabled）下 focus 不触发，无需额外处理
真正要花时间的不是写那行 CSS，而是确认你改的是最终渲染到页面上的那个元素——很多时候 shadow 没变，只是你改错了 selector 或变量名拼错成了 --bs-form-control-focus-shadow（少了个 box-）。
