bootstrap 4 的 input:focus 蓝边由 outline 和 box-shadow 共同实现，需同时清除二者；仅清其一会导致残留或兼容性问题；必须用更高特异性选择器覆盖，并为键盘用户保留清晰焦点指示以满足 wcag。
Bootstrap 4 的 input:focus 蓝边是 outline + box-shadow 双重作用
Bootstrap 4 默认用 outline 和 box-shadow 一起渲染焦点蓝边，只清 outline: none 不够——box-shadow 还在，蓝光晕照常出现；反过来只清 box-shadow，旧版 Firefox 或高对比度模式下仍会 fallback 显示原生 outline。必须两者都处理。
.form-control:focus 选择器权重不够？加类或提高特异性
直接写 .form-control:focus { outline: none; box-shadow: none; } 常不生效，因为 Bootstrap 4 的原始规则带 !important 或更高层嵌套（比如 .input-group .form-control:focus）。建议：
- 在自定义 CSS 文件中，确保它加载在 Bootstrap CSS 之后
- 用更具体的选择器，例如：
.my-form .form-control:focus或input.form-control:focus - 必要时加
!important，但仅限调试阶段；上线前应优先靠选择器权重解决 - 别漏掉其他表单控件：
textarea.form-control:focus、select.form-control:focus需单独覆盖
移除后键盘用户看不见焦点？必须补一个替代反馈
去掉蓝边最危险的后果不是样式错位，而是键盘 Tab 导航时焦点“消失”。WCAG 要求所有可聚焦元素必须提供清晰的视觉焦点指示。可行做法：
- 用
border-color替代：例如.form-control:focus { border-color: #0d6efd; } - 用柔和
box-shadow替代：例如box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2); - 避免全清：
outline: none可以留着，但把outline-color设为透明或与背景同色（不推荐） - 不要全局写
*:focus { outline: none; }——这会干掉所有按钮、链接、自定义 checkbox 的焦点提示
第三方插件和自定义组件也得同步清理
如果你用了 bootstrap-select、date-picker 或封装了 <input> 的 Vue/React 组件，它们内部的触发按钮、隐藏 <input>、<label></label> 都可能获得焦点并亮蓝边。典型漏点：
-
.custom-select:focus（Bootstrap 4 自定义下拉） .custom-checkbox input:focus + .custom-control-label-
.input-group-text:focus（如果它被设为tabindex="0"） - 任何带
tabindex的容器元素，比如div[tabindex="0"]，都需检查其:focus样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
