Bootstrap 5 输入框(Input)聚焦阴影 focus-ring 去除-Bootstrap教程-PHP中文网

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 样式，屏幕阅读器或键盘导航用户会失去焦点位置感知。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

检查是否生效：用键盘 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></b-form-input>（BootstrapVue）：需升级到 v2.21+，并设置 no-focus-ring 属性
React 中 react-bootstrap 的 Form.Control：加 autoFocus={false} 并配合全局 CSS 覆盖
最稳妥做法：在组件外层加 class，用更高权重选择器覆盖，例如 .my-no-ring input:focus-visible