outline: none 不生效是因为 Bootstrap v5+ 用 box-shadow 模拟焦点环而非原生 outline；需覆盖 .form-control:focus 等选择器的 box-shadow: none 并确保样式优先级足够高。
为什么 outline: none 不生效？
直接在 input 上写 outline: none 常常没用，因为 Bootstrap（尤其是 v5+）用的是 :focus-visible 伪类 + box-shadow 模拟焦点环，不是传统 outline。浏览器原生 outline 被禁用后，它靠 box-shadow 实现可访问性友好的高亮，所以删 outline 根本不影响那个蓝环。
覆盖 Bootstrap v5 的 box-shadow 焦点样式
Bootstrap v5 默认对 .form-control:focus 添加了 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)。要移除它，必须提高 CSS 优先级并显式重置该属性：
- 确保你的 CSS 在 Bootstrap 之后加载（或使用
!important强制覆盖） - 针对所有常见状态：普通输入、
textarea、select、以及禁用/只读态的例外处理 - 保留
:focus-visible行为更合理，但若明确要彻底移除，可直接作用于:focus
.form-control:focus,
.form-control:focus-visible,
textarea:focus,
select:focus {
box-shadow: none;
outline: none;
}
兼容旧版 Bootstrap（v4）和自定义主题
Bootstrap v4 使用的是 outline: 0 + box-shadow 组合，且部分变体（如 .form-control-lg）会叠加额外阴影。此时需一并覆盖：
- v4 中焦点阴影是
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25)，颜色值不同 - 如果用了 Bootstrap 主题变量（如通过 Sass），建议在源码中修改
$input-focus-box-shadow变量，而非硬覆盖 - 某些组件（如
input-group内的input）可能需要更具体的选择器，例如.input-group .form-control:focus
无障碍与键盘导航的隐含影响
完全移除焦点指示器会让键盘用户无法判断当前聚焦位置，WCAG 明确不推荐。如果设计要求“无轮廓”，更稳妥的做法是：
- 用细微的
border-color变化替代（如border-color: #007bff） - 仅对鼠标操作禁用焦点环：
:focus:not(:focus-visible) { box-shadow: none; }，保留键盘用户的:focus-visible - 测试时用
Tab切换，确认关键控件仍有视觉反馈
真正难的不是删掉那圈蓝光，而是删掉之后，谁还记得光标在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
