必须同时清除 outline 和 box-shadow 并覆盖所有焦点伪类组合，否则蓝边无法彻底去除；同时需提供替代焦点样式以保障无障碍访问。
为什么只设 outline: none 还是去不掉蓝边
因为 Bootstrap 的“蓝色边框”根本不是纯 outline，而是 box-shadow + outline 双重叠加的效果。只清 outline，box-shadow 仍在，蓝边照常出现；反过来只清 box-shadow，部分浏览器（如旧版 Firefox）仍会保留默认焦点轮廓。
必须同时处理两者，且要覆盖所有可能触发该状态的伪类组合：
-
.btn:focus：键盘 Tab 进入或点击后获得焦点 -
.btn:active:focus：鼠标按下瞬间仍处于焦点态 -
.btn.active:focus：带active类的按钮（如下拉 toggle 按钮） -
.btn.focus和.btn:active.focus：Bootstrap 3/4 中为兼容 JS 动态添加的 class
.btn:focus 相关选择器必须写全，不能偷懒
Bootstrap 版本不同，触发焦点样式的 class 和伪类组合有差异。比如 Bootstrap 4.6 用 .btn:focus 和 .btn:active:focus，而 Bootstrap 5 移除了 .focus 类但强化了 :focus-visible 支持。若只写 .btn:focus，在某些交互路径下（如鼠标点按后松开、再键盘操作）蓝边仍会闪现。
稳妥写法（适配 Bootstrap 4–5）：
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
box-shadow: none;
}
注意：!important 通常不需要——只要你的 CSS 文件在 Bootstrap 之后加载，且选择器特异性足够，就能生效。
input / select / custom checkbox 同样会亮蓝边
别只盯着 .btn。所有可聚焦元素都受同一机制影响，包括：
-
.form-control（<input>、<textarea></textarea>） -
.custom-select和第三方插件（如bootstrap-select的下拉按钮） - 自定义
checkbox/radio的<label></label>（如果绑定了for或包裹了input）
对应清理规则示例：
.form-control:focus,
.custom-select:focus,
.custom-checkbox input:focus + .custom-control-label,
.custom-radio input:focus + .custom-control-label {
outline: none;
box-shadow: none;
border-color: #ced4da; /* 避免聚焦时边框变蓝或消失 */
}
去掉蓝边后，键盘用户就“看不见焦点”了
这是最常被忽略的一点：移除 outline 和 box-shadow 后，仅靠键盘操作的用户（无障碍访问必需）将无法判断当前焦点在哪。这不是视觉洁癖问题，而是 WCAG 合规风险。
必须提供替代视觉反馈，例如：
- 给
.btn:focus加border: 2px solid #007bff（比原蓝边更粗更明确） - 用
background-color微调（如background-color: #e9f7fe） - 对
.form-control:focus改用border-bottom单边强调，减少干扰
真正安全的做法不是“彻底隐藏”，而是“可控替换”。否则上线后被审计指出焦点不可见，返工成本远高于一开始加两行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
