bootstrap 5 中 .form-control 默认无 hover 边框变色效果，需手动添加 .form-control:hover { border-color: #28a745 !important; box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.15) !important; } 并同步处理 :focus 和 :disabled 状态。
Bootstrap 5 中 .form-control 没有 hover 边框变色效果
默认情况下，.form-control 在 :hover 状态下**不会改变边框颜色或触发发光效果**——Bootstrap 5 官方 CSS 根本没给 .form-control:hover 写任何样式。你看到的“悬停变化”，大概率是浏览器原生 <input> 的默认焦点反馈（如 Chrome 的浅蓝边框），或是你项目里其他 CSS、框架（如 Tailwind）、或自定义 JS 插件偷偷加的。
想加 hover 边框色？必须手动声明 :hover 规则
要让输入框在鼠标移入时变色，得自己补上 :hover 状态，并覆盖 Bootstrap 的高优先级规则：
- 必须用
!important，否则会被 Bootstrap 的.form-control原生border-color覆盖 - 只写
.form-control:hover { border-color: #28a745; }不够——:focus和:disabled会把它盖掉，得一并处理 - 别只改
border-color，box-shadow在 hover 下仍是默认值，视觉不统一
推荐写法（含 hover + focus + disabled）：
.form-control:hover {
border-color: #28a745 !important;
}
.form-control:focus {
border-color: #007bff !important;
box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25) !important;
}
.form-control:disabled,
.form-control[readonly] {
border-color: #adb5bd !important;
}
hover 时加发光效果？box-shadow 必须显式重写
Bootstrap 的发光（focus ring）靠 box-shadow 实现，但默认只在 :focus 或 :focus-visible 生效。想在 :hover 也发光，就得单独给 :hover 加 box-shadow：
- 不能只复制 focus 的值——那样 hover 和 focus 发光会一模一样，用户无法区分状态
- 建议降低透明度（比如
rgba(40, 167, 69, 0.15)），避免 hover 太抢眼 - 务必保留四值语法
0 0 0 0.25rem，否则可能和 border-width 不匹配，导致视觉“加粗” - 如果用了深色主题，
:hover的发光色也要适配背景，否则发灰发闷
示例（绿色 hover 边框 + 柔和发光）：
.form-control:hover {
border-color: #28a745 !important;
box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.15) !important;
}
为什么加了 hover 还没反应？检查这三点
常见失效原因不是代码写错，而是被更高权重或更晚加载的样式压制：
-
.form-control被包裹在.input-group或.mb-3等容器里，父级设置了border或outline，实际看到的不是 input 本身的边框 - CSS 文件加载顺序不对：你的自定义样式必须放在 Bootstrap 主 CSS 之后，否则
!important也救不了 - 用了封装组件（如 React-Bootstrap 的
Form.Control或 Vue 的b-form-input），它们内部套了 div 层，.form-control:hover选择器根本没命中真实<input>
最直接验证方式：打开 DevTools → 选中输入框 → 切到 Styles 面板，看 :hover 规则是否被划掉，以及 computed 中 border-color 和 box-shadow 的最终值是什么。
