应通过重写 CSS 变量 --bs-box-shadow-focus 或使用同级选择器 .form-control:focus 覆盖 Bootstrap 默认聚焦阴影，避免直接写 :focus 因特异性不足或 !important 冲突失效。
如何修改 Bootstrap 表单控件的 focus 状态阴影
Bootstrap 默认会给 input、textarea、select 等表单元素在获得焦点时添加一个蓝色（或主题色）的 box-shadow，但这个样式是通过 CSS 变量和伪类控制的，直接覆盖需注意层级和变量优先级。
为什么直接写 :focus { box-shadow: ... } 有时不生效
Bootstrap 5+ 使用了 :focus-visible 和 :focus 混合逻辑，并且默认样式带 !important（尤其在某些版本或自定义构建中），同时依赖 CSS 变量如 --bs-box-shadow-focus。硬写 :focus 规则容易被覆盖或忽略。
- 检查是否启用了
prefers-reduced-motion，它会禁用部分 focus 动画 - 确保你的 CSS 在 Bootstrap 样式之后加载（否则会被覆盖）
- Bootstrap 的
.form-control:focus规则权重较高，建议用相同选择器或更高特异性
推荐做法：重写 CSS 变量或覆盖选择器
最稳妥的方式是复写 Bootstrap 提供的 CSS 变量，或者用同级选择器精确覆盖。例如：
:root {
--bs-box-shadow-focus: 0 0 0 0.25rem rgba(255, 193, 7, 0.25); /* 改成你想要的黄色高亮 */
}
<p>.form-control:focus {
box-shadow: var(--bs-box-shadow-focus);
border-color: #ffc107; /<em> 配套改边框色更协调 </em>/
}</p>
如果你只改某类输入框（比如只对 input[type="text"] 生效），可以加更具体的选择器：
input[type="text"].form-control:focus {
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}
- 使用
!important是临时兜底方案，优先靠变量或加载顺序解决 - 避免全局改
:focus，否则会影响按钮、链接等其他元素 - 移动端 Safari 对
box-shadow的 focus 渲染有延迟，可加-webkit-appearance: none辅助
验证是否生效的几个关键点
打开浏览器开发者工具，点击输入框，检查元素上是否同时存在 .form-control 和 :focus 状态；在 Styles 面板里看 box-shadow 是否被划掉（即被覆盖）。
- 确认没有其他 CSS 框架（如 Tailwind）或自定义 reset 干扰了 focus 样式
- 如果用了 Bootstrap 的 Sass 源码，直接在
_variables.scss中改$form-focus-box-shadow更彻底 - 表单控件若加了
disabled或readonly，focus 样式天然不触发
真正要改的就两件事：确保新样式加载时机正确，以及选对目标选择器。其余都是干扰项。
