键盘tab无焦点提示是因为bootstrap 5.3+默认用:focus-visible而非:focus控制键盘焦点，需同时定义:focus和:focus-visible；应优先修改css变量--bs-form-control-focus-box-shadow并适配深色模式。
为什么键盘 Tab 进入时没焦点提示？
不是你漏写了 :focus，而是 Bootstrap 5.3+ 默认用 :focus-visible 控制键盘导航焦点，:focus 只对鼠标点击生效。浏览器会忽略纯 .form-control:focus 规则，导致键盘用户 tab 进去后一片“静默”。
- 必须同时写
.form-control:focus和.form-control:focus-visible，否则鼠标和键盘行为不一致 - 仅加
!important不够——Bootstrap 原生规则本身带!important，你得匹配它 - 别用
outline: none一刀切：这会让屏幕阅读器和键盘用户彻底丢失焦点位置
怎么让键盘焦点既明显又不突兀？
真正有效的焦点提示不是“加粗边框”，而是提供足够对比度、稳定尺寸、且不引发布局偏移的视觉反馈。默认的 box-shadow 是设计意图，别硬改 border。
- 优先改 CSS 变量：
--bs-form-control-focus-box-shadow，一改全改（.form-control、.form-select、.form-check-input都响应） - 推荐值：
0 0 0 0.25rem rgba(106, 90, 205, 0.25)—— 比默认蓝更饱和，深色背景上也清晰 - 如果要用边框反馈，先预留空间：
border: 2px solid transparent默认态，聚焦时只换颜色，不改变盒模型 - 加
transition: box-shadow 0.2s ease，避免“闪跳”感
深色模式下焦点提示发灰怎么办？
不是颜色错了，是 rgba() 的 alpha 值在深背景上被吃掉了。原生变量没适配暗色主题，必须手动干预。
- 别依赖
color-mode类自动切换——Bootstrap 5.3+ 才支持，老项目要自己监听prefers-color-scheme - 在
@media (prefers-color-scheme: dark)里重设变量：--bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(139, 195, 74, 0.3) - 避免用太低透明度（如
0.1），深色背景下至少0.25起步，必要时提到0.3 - 检查是否误用了
--bs-form-control-box-shadow（非 focus 版本），拼错变量名会导致完全无效
第三方组件（Vue/React）里焦点样式失效？
框架封装常导致真实 DOM 结构与预期不符，CSS 作用域或事件未透传，单纯覆盖 .form-control 往往白忙。
- 先用浏览器 DevTools 定位真实渲染出的 class 和父容器结构，比如
<b-form-input></b-form-input>可能生成<input class="form-control">，也可能套了额外 wrapper - 用属性选择器兜底：
input.form-control:focus-visible或[class*="form-control"]:focus-visible - 若组件禁用了原生 focus 事件（如某些表单库），需配合 JS 主动触发
el.focus()并确保 tabindex 正确 - 不要在 scoped CSS 或 CSS-in-JS 中漏掉
:focus-visible伪类——部分编译器会丢弃它
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
