答案：应覆盖css变量--bs-form-control-focus-box-shadow和--bs-form-control-focus-border-color，或在:focus-visible中重写box-shadow并确保样式加载顺序在bootstrap之后。
Bootstrap 5 中 form-control 聚焦边框颜色怎么改
默认的蓝色聚焦边框（box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)）在深色背景或品牌色不匹配时很突兀，直接改 :focus 样式往往无效——因为 Bootstrap 5 用的是 :focus-visible + box-shadow 组合，且带 !important。
最稳妥的方式是覆盖其 CSS 变量：
-
--bs-form-control-focus-box-shadow控制聚焦阴影（含颜色和扩散） -
--bs-form-control-focus-border-color控制聚焦时的 border 颜色（仅当border存在且未被box-shadow完全覆盖时可见）
示例：将所有 form-control 的聚焦边框改为品牌红
:root {
--bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
--bs-form-control-focus-border-color: #dc3545;
}
注意：这个变量作用于整个文档，如果只想改某类输入框，用更具体的 selector，比如 .my-input:focus-visible + 手动重写 box-shadow 和 border-color。
为什么加 !important 还没生效
常见错误是只覆盖 border-color，但 Bootstrap 5 的 form-control:focus-visible 样式里，box-shadow 的视觉权重远高于 border，尤其当 border-width 是默认的 1px 时，几乎看不见。
- 不要只改
border-color，必须同步处理box-shadow - 检查是否在
:focus上改，而实际触发的是:focus-visible（现代浏览器默认行为） - 确认你的 CSS 加载顺序在 Bootstrap 主样式之后，否则会被覆盖
自定义主题下如何批量统一修改
如果你用 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";
这样所有依赖 $form-control-focus-box-shadow 的组件（如 form-select、form-check-input）都会自动继承新值。硬编码 CSS 覆盖容易漏掉这些。
移动端 Safari 的聚焦边框异常变粗
iOS Safari 对 input 元素有默认内阴影（-webkit-appearance: none 也不完全禁用），导致叠加后边框看起来又粗又糊。
- 加
-webkit-tap-highlight-color: transparent消除点击高亮干扰 - 对
input[type="text"], input[type="email"]等显式重置outline: none（但保留box-shadow以维持可访问性） - 避免同时设置
border和强box-shadow，建议优先靠box-shadow表达聚焦态
真正麻烦的不是改颜色，而是不同组件（form-control、form-select、btn）各自用不同变量或规则处理聚焦态，得一个个对齐。别漏掉 form-check-input:checked 这种隐藏控件的焦点反馈。
