聚焦边框颜色不生效是因为未覆盖:focus-visible伪类，且需同时调整box-shadow、统一css变量、保持border-width不变，并确保可访问性。
聚焦边框颜色不生效，是因为没覆盖 :focus-visible
Bootstrap 5.3+ 默认用 :focus-visible 而非 :focus 触发聚焦样式。只写 .form-control:focus 在键盘导航时完全没反应——浏览器会忽略它，你调了颜色也看不到变化。
必须用 .form-control:focus-visible，且加 !important：Bootstrap 原生规则带 !important，不加会被覆盖。
别只改 border-color：默认 box-shadow 的视觉权重远高于边框，尤其当 border-width 是 1px 时，新颜色几乎看不见。
- 深色背景上
rgba(13, 110, 253, 0.25)看起来像灰边？不是颜色错，是透明度太低——把 alpha 提到0.3或换更饱和的主色，比如rgba(106, 90, 205, 0.25) - 统一控制所有表单控件的聚焦边框：直接覆盖 CSS 变量
--bs-form-control-focus-box-shadow，比写一堆选择器靠谱得多 - 变量要放在自定义 CSS 最末尾，或
<style></style>块底部，确保加载顺序在 Bootstrap 主样式之后
聚焦时输入框“跳动”，其实是边框宽度变了
很多自定义样式让输入框一聚焦就上下/左右偏移几像素，根源不是 margin 或 padding，而是边框本身尺寸变化——比如默认 border: 1px solid #ced4da，聚焦时改成 border: 2px solid #0d6efd，多出的 1px 就会撑开盒模型。
解决方案：默认状态就预留好边框空间，例如设 border: 2px solid transparent，聚焦时只改 border-color 和 box-shadow，不改变尺寸。
- 若已用
box-shadow实现焦点反馈，建议保持border-width不变，避免布局抖动 - 检查是否同时设置了
outline和box-shadow，二者叠加可能造成意外偏移 - 在 navbar 等容器中，还要确认父级有没有
overflow: hidden裁剪了阴影外扩部分
移除聚焦边框后，键盘用户看不见焦点了怎么办
直接写 outline: none 或 box-shadow: none 会彻底抹掉键盘导航用户的焦点指示，违反 WCAG。真正要做的不是“删除”，而是“替换”。
保留 outline: 0（不是 none），再叠加 box-shadow 或高对比度 border-color，这是 Bootstrap 自身的做法。
- 若真要移除全部视觉反馈，至少留个可访问的 fallback：
outline: 2px solid transparent+outline-offset: 2px，屏幕阅读器和键盘用户仍能感知焦点位置 - 验证方式很简单：用 Tab 键遍历表单，看每个字段获得焦点时是否有明确、一致、足够对比度的视觉提示
- 暗色主题下尤其要注意：默认
rgba(13, 110, 253, 0.25)在深灰背景上对比度不足，得显式指定亮蓝或琥珀色
navbar 或 modal 里聚焦边框被遮挡或失效
Bootstrap 导航栏默认有 overflow: hidden，会裁掉 box-shadow 的外扩部分；modal 的 z-index 层叠也可能盖住输入框的聚焦阴影。
必须给搜索框加 position: relative 和更高 z-index（如 z-index: 2），确保阴影不被遮挡。
- 别只改
border-color：Bootstrap 5 聚焦态主要靠box-shadow实现，直接覆盖border不起作用 - 必须包含上下文前缀，例如
.navbar .form-control:focus-visible或.modal .form-control:focus-visible，否则选择器权重不够，被 Bootstrap 默认规则覆盖 - 模态框内输入框自动聚焦失败？检查是否误加了
tabindex="-1"到.modal容器，它会阻断焦点流向子元素
:focus-visible 规则来源，比盲调颜色更省时间。
