Bootstrap 5 中不存在 focus-ring 类，实际使用 :focus-visible 伪类实现仅键盘触发的焦点环；删不掉是因为未覆盖该伪类样式，而仅写 :focus 无效。
Bootstrap 5 的 focus-ring 是什么，为什么删不掉？
不是 css 写错了，而是 bootstrap 5 默认启用了 focus-ring 机制——它不依赖 :focus，而是用 javascript 检测“键盘聚焦”（如 tab）才显示蓝色环，鼠标点击时默认不触发。所以单纯写 input:focus { box-shadow: none !important; } 无效，因为实际生效的是 .focus-ring 类或 :focus-visible 伪类。
彻底禁用 focus-ring 的两种可靠方式
推荐优先用官方配置项，其次用 CSS 覆盖。别碰 JS 初始化逻辑，容易引发可访问性问题。
- 在 Sass 项目中，编译前设置变量：
$enable-focus-ring: false;，然后重新构建 Bootstrap CSS - 纯 CSS 方案（适用于 CDN 或已构建的 CSS）：添加以下规则（必须带
!important，且放在 Bootstrap 样式之后）:focus-visible { outline: 0; box-shadow: none !important; } .form-control:focus-visible, .input-group-text:focus-visible, .btn:focus-visible { box-shadow: none !important; } - 注意：仅覆盖
:focus不够，:focus-visible才是现代浏览器（Chrome/Firefox/Edge）实际使用的标准
为什么不能只写 input:focus？
因为 Bootstrap 5 把焦点样式逻辑从 :focus 迁移到了 :focus-visible，这是为了满足 WCAG 2.1 可访问性要求——避免鼠标用户看到突兀的轮廓，同时保留键盘用户的视觉反馈。如果你强制删掉所有 :focus-visible 样式，屏幕阅读器或键盘导航用户会失去焦点位置感知。
- 检查是否生效：用键盘 Tab 切换到输入框，看是否还有蓝环；再用鼠标点一下，确认蓝环消失
- 某些旧版 Chrome（:focus 回退逻辑，所以建议两条规则都写上
- 如果用了
form-control+is-invalid等状态类，记得同步覆盖.form-control.is-invalid:focus-visible
第三方组件（如 Vue/React 封装）里怎么处理？
本质一样，但需确认组件是否透传原生 tabindex 和事件。常见坑是封装层拦截了 focus 事件，导致 :focus-visible 不触发，此时 CSS 生效但行为异常。
- Vue 中使用
v-model的<b-form-input>（BootstrapVue）：需升级到 v2.21+，并设置no-focus-ring属性 - React 中
react-bootstrap的Form.Control：加autoFocus={false}并配合全局 CSS 覆盖 - 最稳妥做法：在组件外层加 class，用更高权重选择器覆盖，例如
.my-no-ring input:focus-visible
focus-ring 很容易，但得清楚删的是哪一层、对谁生效、谁会因此找不到焦点——尤其当团队有视障测试流程时，:focus-visible 不是装饰，是路径标识。 
