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

Bootstrap 5 聚焦光晕由 box-shadow 实现而非 outline，应覆盖 .form-control:focus 的 box-shadow 并加 !important；需注意深色模式适配、框架组件样式穿透及可访问性保留。修改 form-control 聚焦时的蓝色光晕（Bootstrap 5）bootstrap 5 默认用 box-shadow 实现 :focus 光晕，颜色来自 primary，宽度和模糊度由 form-control-focus-box-shadow 控制。直接覆盖 css 变量最稳妥，避免被框架后续规则覆盖。推荐在自定义 CSS 文件末尾或 <style> 块中重写 :focus 样式，且加 !important（Bootstrap 的原生规则优先级高）关键属性是 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 是旧版 Bootstrap（v3/v4）常见操作，v5 已弃用该模式如果同时写了 outline: none 和自定义 box-shadow，要确认后者没有被其他规则（如 .was-validated 或 :focus-visible）覆盖屏幕阅读器依赖 :focus 状态，删掉所有焦点样式会降低可访问性；建议保留视觉反馈，仅调整颜色/大小兼容深色模式下光晕发灰？默认 $form-control-focus-box-shadow 基于浅色主题变量生成，深色模式下若未重写 CSS 变量，rgba 值中的透明度会让光晕显得浑浊。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。