Bootstrap v5+默认用:focus-visible替代:focus，鼠标点击不触发是故意的可访问性设计；应优先覆盖--bs-form-control-focus-box-shadow变量并使用.form-control:focus-visible，兼顾可访问性与视觉效果。
focus伪类在Bootstrap表单中为什么没反应
因为Bootstrap（尤其是v5+）默认用 :focus-visible 替代了 :focus，且对 input、select 等控件加了 outline: 0 和自定义 box-shadow。直接写 :focus { box-shadow: ... } 很可能被覆盖或不触发。
- 检查是否启用了
prefers-reduced-motion，它会让部分焦点样式降级 - 确保你的CSS规则优先级高于Bootstrap的
.form-control:focus（比如加!important或用更具体的选择器） - Bootstrap v5.3+ 默认只对键盘聚焦生效
:focus-visible，鼠标点击不会触发——这是故意的可访问性设计，不是bug
怎么安全覆盖Bootstrap的focus阴影
推荐用Bootstrap自带的CSS变量 + 重写 :focus-visible，而不是暴力清空所有原生样式。这样既保留可访问性，又可控美观。
- 用
.form-control:focus-visible而不是.form-control:focus - 通过
--bs-form-control-focus-box-shadow变量注入新阴影：.form-control:focus-visible { --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } - 如需鼠标点击也生效，可补充
.form-control:focus，但要加!important并注意屏幕阅读器体验
阴影颜色和尺寸怎么选才不突兀
别直接套用品牌色硬加粗阴影。Bootstrap默认用 rgba(13, 110, 253, 0.25)（即 primary 的弱化版），这是经过对比度和视觉权重平衡的结果。
- 阴影扩散半径建议保持
0.25rem，太大显得浮肿，太小看不出效果 - 避免用纯黑/纯白阴影：
box-shadow: 0 0 0 0.25rem #000会破坏表单层级感 - 深色模式下记得同步覆盖
--bs-form-control-focus-box-shadow变量，否则阴影可能不可见
自定义控件（如switch、file input）怎么加focus效果
这些控件原生不支持 :focus-visible 或渲染逻辑特殊，得靠包裹元素或伪元素模拟。
-
.form-check-input:focus-visible + .form-check-label可给checkbox/radio的label加边框或背景 - file input 的
<input type="file">本身不可见，需作用于其父容器（如.input-group）并监听子元素聚焦 - 第三方组件（如Select2、Flatpickr）要查文档看是否暴露
focusedclass，别硬塞:focus
实际项目里最常漏的是深色模式适配和键盘聚焦与鼠标聚焦的行为差异——这两处一错，用户要么看不见焦点，要么觉得交互不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
