bootstrap如何修改输入框获取焦点时的光晕

Bootstrap 5 聚焦光晕由 box-shadow 实现而非 outline应覆盖 .form-control:focus 的 box-shadow 并加 !important需注意深色模式适配、框架组件样式穿透及可访问性保留。修改 form-control 聚焦时的蓝色光晕Bootstrap 5bootstrap 5 默认用 box-shadow 实现 :focus 光晕颜色来自 $primary宽度和模糊度由 $form-control-focus-box-shadow 控制。直接覆盖 css 变量最稳妥避免被框架后续规则覆盖。推荐在自定义 CSS 文件末尾或 style 块中重写 :focus 样式且加 !importantBootstrap 的原生规则优先级高关键属性是 box-shadow不是 outline——Bootstrap 已移除 outline改用 shadow 模拟光晕若只改颜色不改形状可只覆盖 --bs-form-control-focus-box-shadow CSS 变量但需确保它在 :focus 选择器内生效部分版本需手动绑定.form-control:focus { box-shadow: 0 0 0 0.25rem rgba(255, 105, 180, 0.25) !important;}为什么 outline: none 不起作用因为 Bootstrap 5 的 .form-control:focus 根本没用 outline它靠 box-shadow 实现视觉焦点。强行设 outline: none 不会消除光晕反而可能让焦点状态失去可访问性提示。禁用 outline 是旧版 Bootstrapv3/v4常见操作v5 已弃用该模式如果同时写了 outline: none 和自定义 box-shadow要确认后者没有被其他规则如 .was-validated 或 :focus-visible覆盖屏幕阅读器依赖 :focus 状态删掉所有焦点样式会降低可访问性建议保留视觉反馈仅调整颜色/大小兼容深色模式下光晕发灰默认 $form-control-focus-box-shadow 基于浅色主题变量生成深色模式下若未重写 CSS 变量rgba 值中的透明度会让光晕显得浑浊。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。