Bootstrap 5中form-control聚焦边框不生效主因是navbar的overflow:hidden裁剪box-shadow或z-index遮挡，应加position:relative与更高z-index，并重写.navbar .form-control:focus的box-shadow而非仅改border-color。
Bootstrap 5 中 form-control 聚焦边框颜色不生效？
默认情况下，Bootstrap 5 的 form-control 在聚焦时会显示蓝色边框（box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)），但如果你用在导航栏（navbar）里，尤其是配合 navbar-light 或背景为浅色/白色时，这个阴影可能被遮挡、视觉弱化，甚至完全看不见——不是没触发，是被父容器的 overflow: hidden 或 z-index 层叠盖住了。
实操建议：
- 检查导航栏是否设置了
overflow: hidden（Bootstrap 默认 navbar 有该样式），它会裁掉box-shadow的外扩部分 - 给搜索框加
position: relative和更高z-index（如z-index: 2），确保阴影不被遮挡 - 别只改
border-color：Bootstrap 5 聚焦态主要靠box-shadow实现，直接覆盖border不起作用
如何自定义 form-control:focus 的聚焦边框颜色
最稳妥的方式是重写 :focus 伪类的 box-shadow，同时保留原生可访问性（比如不移除 outline）。注意不要用 !important 硬顶，而是提高 CSS 选择器权重。
示例（放在自定义 CSS 文件末尾或 块中）：
.navbar .form-control:focus {
box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25); /* 替换为你想要的主色，如 indigo */
border-color: #3b82f6; /* 可选：同步更新 border 颜色，增强一致性 */
}
关键点：
- 必须包含
.navbar前缀，否则可能被 Bootstrap 的默认规则覆盖（它的选择器是.form-control:focus，权重相同，后加载者胜出） - RGBA 第四个参数（透明度）建议保持
0.25，太大会显得突兀，太小则不可见 - 如果用了 Sass，直接修改
$form-control-focus-box-shadow变量更彻底，但仅限项目级定制
为什么在 navbar-dark 里聚焦边框变灰了？
因为 Bootstrap 5 为 navbar-dark 提供了一套暗色主题变量，其中 $primary 被设为浅色（如 #f8f9fa），导致 form-control:focus 的 box-shadow 使用了这个“浅主色”，在深色背景上对比度低，看起来像灰色甚至隐形。
解决办法不是换主题，而是精准覆盖：
- 对暗色导航栏单独写规则：
.navbar-dark .form-control:focus - 显式指定一个高对比度颜色，例如
rgba(100, 200, 255, 0.3)（亮蓝）或rgba(255, 215, 0, 0.4)（琥珀色） - 避免依赖
$primary，暗色环境下用户更需要明确的视觉反馈，颜色要主动控制
移动端 Safari / Chrome 输入聚焦时边框闪一下就没了？
这是 iOS Safari 的经典问题：软键盘弹出时触发页面重排，导致 :focus 样式短暂丢失或重置。不是 CSS 写错了，是浏览器行为。
能做的有限但有效：
- 给
.form-control加outline: none（前提是已用box-shadow提供足够反馈，否则损害可访问性） - 监听
focusin事件，动态加 class 强制激活样式（如focused），再用 CSS 规则覆盖.form-control.focused - 慎用
transform: translateZ(0)强制硬件加速——有时反而加剧闪动
真正难处理的是输入法上屏瞬间的样式抖动，目前没有通用解法，只能接受它存在，并确保核心焦点反馈（如 shadow）在绝大多数帧里稳定可见。
