Bootstrap怎么设置表单输入框获取焦点时的阴影样式

应通过重写 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>/
}

如果你只改某类输入框（比如只对 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 样式天然不触发

真正要改的就两件事：确保新样式加载时机正确，以及选对目标选择器。其余都是干扰项。