bootstrap 5 中 input:focus 高亮由 $form-control-focus-box-shadow 控制，默认用 box-shadow 而非 border，修改需重定义 sass 变量或用 !important 覆盖并兼顾 :focus-visible 可访问性。
Bootstrap 5 中 input:focus 的高亮色由 $form-control-focus-border-color 控制
Bootstrap 5 默认用 box-shadow 实现 focus 高亮（不是纯边框），颜色来源于 Sass 变量 $form-control-focus-border-color，其默认值是 transparent，真正起作用的是 $form-control-focus-box-shadow。直接写 input:focus { border-color: red; } 会被覆盖，因为 Bootstrap 的 box-shadow 优先级更高且带 !important。
- 修改方式优先走 Sass 变量重定义：在引入 Bootstrap 前，自定义变量值
- 若用 CDN 或已编译 CSS，需用更高优先级选择器覆盖
.form-control:focus，并显式清除原有 box-shadow - 注意
:focus-visible在新版 Bootstrap 中已逐步替代单纯:focus，以支持键盘导航友好性
用 Sass 重定义变量是最干净的方案
如果你项目使用 Sass 编译 Bootstrap（如 Vue CLI、Create React App 配 Sass），在自定义样式文件中提前声明变量即可：
$form-control-focus-border-color: #007bff; $form-control-focus-box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/forms";
关键点：$form-control-focus-box-shadow 的透明度（最后一个参数）和颜色需匹配，否则高亮会过淡或过重；$form-control-focus-border-color 主要影响原生边框（当禁用 box-shadow 时才明显）。
纯 CSS 覆盖必须同时处理 box-shadow 和 border
若无法改 Sass，用 CSS 强制覆盖时，仅改 border-color 不生效。必须清除默认阴影，并补全 focus 状态的所有视觉反馈：
.form-control:focus,
.form-control:focus-visible {
border-color: #dc3545 !important;
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}
- 务必加
:focus-visible保证可访问性，否则键盘 tab 进入时无反馈 - 使用
!important是因 Bootstrap 的 box-shadow 规则带 !important - 避免只写
input:focus—— Bootstrap 的 class 选择器（如.form-control:focus）优先级更高
自定义主题色时别漏掉其他表单控件
focus 样式不只影响 <input>，<select></select>、<textarea></textarea>、.form-check-input（复选框/单选）也共用同一套变量。比如 .form-check-input:focus 的环形高亮色，也受 $form-check-input-focus-box-shadow 控制，需一并检查。
最容易被忽略的是 disabled 状态下 focus 是否还应触发 —— Bootstrap 默认禁用态移除 focus 样式，这是合理行为，不要强行恢复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
