必须使用 .form-control:focus-visible 覆盖 bootstrap 5.3+ 聚焦样式，并修改 --bs-form-control-focus-box-shadow 变量；深色背景下需提高 rgba 透明度或主色饱和度；禁用 box-shadow 时须保留可访问的焦点指示。
聚焦边框颜色不生效？必须用 :focus-visible 覆盖
Bootstrap 5.3+ 默认用 :focus-visible 触发高亮样式，而不是旧的 :focus。只写 .form-control:focus { border-color: red; } 在键盘导航时完全没反应——浏览器会忽略它。
真正起效的方式是：
- 必须使用
.form-control:focus-visible选择器 - 加上
!important（因为 Bootstrap 原生规则带!important） - 不能只改
border-color：默认box-shadow的视觉权重远高于 1px 边框，光调色看不见效果
统一改所有表单控件的聚焦外边框，优先覆盖 CSS 变量
Bootstrap 5.3+ 用 --bs-form-control-focus-box-shadow 控制 .form-control、.form-select、.form-check-input 的聚焦阴影。改这个变量比写一堆选择器更可靠，一改全改，不漏项。
把它放在自定义 CSS 最末尾（确保加载在 Bootstrap 主样式之后）：
:root {
--bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(106, 90, 205, 0.25);
}
注意：--bs-form-control-focus-border-color 只在你禁用了 box-shadow、且显式保留了 border 时才起作用。
深色背景上光晕发灰？不是颜色错，是透明度或饱和度不够
比如 rgba(13, 110, 253, 0.25) 在深灰背景上看起来像浅灰，问题不在数值本身，而在 alpha 值太低或主色饱和度不足。
- 把 alpha 提到
0.3或更高（如rgba(13, 110, 253, 0.3)） - 换更饱和的主色，比如
rgba(79, 70, 229, 0.25)（靛蓝）或rgba(139, 92, 246, 0.25)（violet） - 避免直接用
#0d6efd拆成 rgba——十六进制色值转 rgba 时 alpha 易被误设为 0
移除光晕后键盘用户看不见焦点？别删，要替换
写 box-shadow: none 或 outline: none 会彻底抹掉键盘用户的焦点指示，违反 WCAG。
正确做法是保留视觉反馈，只是换一种形式：
- 用
outline: 0（不是none），再叠加border-color或高对比度box-shadow - 或退而求其次：用
outline: 2px solid transparent+outline-offset: 2px，屏幕阅读器和键盘用户仍能感知焦点位置 - 验证方式很简单：用 Tab 键遍历表单，看每个字段获得焦点时是否有明确、一致、足够对比度的视觉提示
最易被忽略的是 :focus-visible 的兼容性逻辑和深色模式下 rgba 的实际表现——这两个点不验，上线后大概率被 QA 或残障用户提 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
