禁用或替换 Bootstrap 5 input 聚焦蓝色光晕需重置 box-shadow 而非 outline，因默认使用 $form-control-focus-box-shadow 变量控制；推荐通过 Sass 变量全局修改或高优先级 CSS 覆盖，并保留可访问性视觉反馈。
如何禁用或替换 input 获取焦点时的默认蓝色光晕（outline）
bootstrap 5 默认使用 box-shadow 实现 focus 状态下的蓝色外发光（不是传统 outline），它来自 :focus 伪类和 $form-control-focus-box-shadow 变量。直接覆盖 outline: none 无效，必须针对性重置 box-shadow。
- 修改前先确认你用的是 Bootstrap 5（4.x 用
outline，5+ 改用box-shadow） - 若用 Sass 编译，优先在自定义变量中覆盖
$form-control-focus-box-shadow - 若仅用 CDN 或 CSS 文件，需用更高优先级的选择器强制重写
box-shadow - 务必保留可访问性：移除焦点样式后，键盘用户将无法识别当前聚焦控件，建议用其他方式（如边框变色、背景微调）替代
通过 Sass 变量全局修改（推荐用于定制构建）
如果你用 Sass 引入 Bootstrap（例如 @import "bootstrap/scss/functions";），可在引入前定义变量：
$form-control-focus-box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); // 原始值（可改透明度或颜色） // 或完全禁用： $form-control-focus-box-shadow: none; @import "bootstrap/scss/bootstrap";
注意：$form-control-focus-box-shadow 影响所有表单控件（input、select、textarea），且需确保变量在 @import bootstrap 之前声明。
用 CSS 覆盖单个输入框的 focus 样式（适用于 CDN 或快速调试）
直接写 CSS 时，选择器权重必须高于 Bootstrap 默认规则。Bootstrap 5 的原始规则是：
.form-control:focus {
color: #212529;
background-color: #fff;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
所以覆盖写法应为：
.form-control:focus {
box-shadow: none !important;
}
/* 或更安全地加具体 class */
.my-input:focus {
box-shadow: 0 0 0 0.2rem rgba(72, 119, 255, 0.3) !important; /* 换成你喜欢的颜色 */
}
⚠️ !important 在这里几乎不可避免——Bootstrap 的原生规则带 .form-control:focus 这种高权重组合。
为什么不能只写 outline: none？
因为 Bootstrap 5 已弃用 outline 实现焦点提示，转而用 box-shadow。你看到的“蓝色光晕”根本不是 outline，而是 box-shadow 的扩散效果。所以：
-
outline: none对它完全没影响 - 浏览器原生
outline（比如按 Tab 键时的虚线框）可能仍存在，需额外处理：outline: 0或outline: 2px solid transparent - 某些辅助技术依赖
:focus-visible，建议搭配使用以兼顾键盘用户：.form-control:focus-visible { box-shadow: ... }
真正要改的，永远是 box-shadow；容易被忽略的是可访问性退化风险——去掉光晕后，别忘了给键盘用户提供等效视觉反馈。
