bootstrap 5+ 的蓝色焦点边框由 box-shadow 而非 outline 实现，仅设 outline: none 无效；需同时覆盖 box-shadow: none 和 border-color，并兼顾可访问性。
直接去掉 Bootstrap 输入框聚焦时的蓝色边框，不能只写 outline: none —— 因为 Bootstrap 5+ 的“蓝边”根本不是 outline，而是 box-shadow，且它和 border-color 共同构成视觉反馈。只清一个，蓝边照常出现。
为什么 outline: none 单独写没用
Bootstrap 5 默认用 $form-control-focus-box-shadow 变量控制焦点效果，原始值类似 0 0 0 0.25rem rgba(13, 110, 253, 0.25)。这个阴影叠加在元素外侧，远比浏览器默认 outline 更显眼。而旧版（4.x）确实依赖 outline，但 5+ 已完全转向 box-shadow。所以：
-
outline: none对 Bootstrap 5 的蓝边基本无效 -
box-shadow: none必须写，且选择器权重要压过 Bootstrap 原生规则 - 部分主题或自定义变体还会改
border-color，不重置会导致边框变蓝
.form-control:focus 覆盖写法（CDN / CSS 直接引入场景）
如果你没用 Sass 编译，只是通过 CDN 或 dist CSS 引入 Bootstrap，那就得靠高优先级 CSS 覆盖。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);
}
对应覆盖建议（放在你自己的 CSS 文件末尾，确保加载顺序在 Bootstrap 之后）：
-
.form-control:focus必须写全，不能简写成input:focus—— 否则对textarea、select无效 - 加
!important更稳妥，因为 Bootstrap 的dist/css/bootstrap.min.css大量使用!important - 建议同时重置
border-color，避免某些主题下聚焦时边框突变
示例：
.form-control:focus {
outline: none !important;
box-shadow: none !important;
border-color: #ced4da !important;
}
用 Sass 变量全局修改（推荐用于定制构建）
如果你项目里用的是 Sass（比如 @import "bootstrap/scss/bootstrap"），最干净的方式是提前覆盖变量：
- 变量名是
$form-control-focus-box-shadow，影响所有.form-control、textarea、select - 必须在
@import "bootstrap/scss/bootstrap"之前声明 - 设为
none就彻底禁用；设为透明色可保留结构但隐藏视觉
示例：
$form-control-focus-box-shadow: none; @import "bootstrap/scss/bootstrap";
别忘了可访问性：键盘用户靠什么知道焦点在哪
移除 box-shadow 和 outline 后，纯键盘操作的用户将无法感知当前聚焦控件 —— 这违反 WCAG 2.1。真实项目中更合理的做法是替换，而不是删除：
- 用
border-color: #0d6efd加粗边框（比阴影更轻量） - 加
background-color: #f8f9fa微调背景 - 或仅对鼠标操作隐藏轮廓：
.form-control:focus:not(:focus-visible)+outline: none，但注意 Safari 15.4+ 才稳定支持:focus-visible
真正难的不是写那几行 CSS，而是判断：这个输入框是否会被键盘用户高频操作？如果会，就别急着“去掉”，先想好替代反馈是什么。
