不能只写 outline: none，因为会移除键盘导航用户的焦点指示，违反可访问性原则；应通过复写 .form-control:focus 规则，用 outline: 0 结合 box-shadow 和 border-color 替代，确保焦点状态可见且符合 WCAG 标准。
Bootstrap 默认会给 :focus 状态的表单控件（如 <input>、<select>、<textarea>）添加蓝色（或主题色）的 outline，这在某些设计中显得突兀，尤其当已用 box-shadow 或边框变色做聚焦反馈时，双重视觉提示反而干扰体验。直接删掉 outline 即可，但要注意可访问性影响。
为什么不能只写 outline: none？
单纯加 outline: none 会移除键盘导航用户的焦点指示，违反 WCAG 可访问性原则。Bootstrap 本身其实已做了部分兼顾：它的 .form-control:focus 规则里用的是 outline: 0 + box-shadow 替代方案。所以真正要做的不是“删除”，而是“替换”或“定制”这个聚焦样式。
- Bootstrap 5.x 默认使用
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)（蓝色高亮）作为聚焦反馈 - 该
box-shadow是在outline: 0基础上叠加的，不是靠outline本身 - 若你禁用了
box-shadow但没补其他聚焦样式，就等于彻底抹掉了焦点状态
覆盖 Bootstrap 的 .form-control:focus 样式
最稳妥的方式是复写 Bootstrap 的聚焦规则，保留可访问性支持。优先级需高于 Bootstrap 原始 CSS（例如放在自定义 CSS 文件末尾，或用更具体的选择器）：
.form-control:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25); /* 改成你的主题色 */
border-color: #4f46e5; /* 同步更新边框色，保持一致 */
}- 必须保留
outline: 0，否则原生outline会和新box-shadow叠加出现双线 -
box-shadow的第四位参数（alpha）建议 ≥ 0.15，确保在深色背景下仍可见 - 如果项目用了 CSS-in-JS 或构建工具（如 Vite），注意 CSS 加载顺序 —— 自定义样式必须后于 Bootstrap CSS
对非 .form-control 元素（如 <button>）也生效
Bootstrap 的按钮、自定义复选框/单选框等也有自己的 :focus 样式。若需统一处理，得单独覆盖：
立即学习“前端免费学习笔记（深入）”；
button:focus,
.btn:focus,
.custom-checkbox input:focus + .custom-control-label::before,
.custom-radio input:focus + .custom-control-label::before {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
}-
custom-checkbox和custom-radio的伪元素聚焦依赖于input:focus触发，不能只写label:focus - Bootstrap 4 和 5 的类名略有差异（如
.custom-control→.form-check），确认你用的版本 - 某些第三方组件（如 Select2、Flatpickr）内部表单元素可能不受此影响，需额外定位其内部
input
真正麻烦的不是怎么去掉那条线，而是去掉之后——用户用 Tab 键切换时，焦点落在哪、是否还能被感知。别为了“视觉干净”牺牲可操作性；用 box-shadow 替代 outline 是标准解法，但颜色、尺寸、透明度这些细节，恰恰是容易被跳过测试的盲区。
