Bootstrap输入框聚焦时的蓝色光晕怎么去-Bootstrap教程-PHP中文网

直接去掉 bootstrap 5+ 输入框聚焦蓝光需重置 box-shadow 而非仅 outline：.form-control:focus { outline: none; box-shadow: none; border-color: #ced4da; }，并兼顾可访问性与移动端适配。

bootstrap输入框聚焦时的蓝色光晕怎么去

直接去掉 Bootstrap 输入框聚焦时的蓝色光晕，关键不是清 outline，而是重置 box-shadow —— 因为 Bootstrap 5+ 默认用它实现“光晕”，outline: none 单独写根本没用。

为什么 `outline: none` 不生效

Bootstrap 5 的 .form-control:focus 样式里压根没设 outline（或设为 0），真正发光的是 box-shadow，值类似 0 0 0 0.25rem rgba(13, 110, 253, 0.25)。只写 outline: none，光晕照常亮。

浏览器 DevTools 里检查 .form-control:focus，重点看 box-shadow 行是否被覆盖
如果用了 Bootstrap 4.x，它确实靠 outline 实现，但 5+ 已切换，先确认你用的版本
!important 在某些场景下必须加——比如你引入的是 bootstrap.min.css，它自带大量 !important，不加可能覆盖失败

最简有效的 CSS 覆盖写法

把这段代码放在你自己的 CSS 文件末尾（确保在 Bootstrap CSS 之后加载）：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #ced4da;
}

outline: none 是保险项，兼容旧版或部分插件行为
box-shadow: none 是核心，必须存在且权重足够高
border-color: #ced4da 是可选但强烈建议：否则聚焦时边框可能变蓝（如用了 btn-outline-primary 类的输入框）
若要影响所有表单控件，还需补充：select.form-select:focus、textarea.form-control:focus

用 Sass 全局修改（适合定制构建项目）

如果你用 Sass 编译 Bootstrap，优先改变量而非硬写 CSS：

$form-control-focus-box-shadow: none;
@import "bootstrap/scss/bootstrap";

这个变量控制所有 .form-control、.form-select、textarea 的 focus 光晕
必须在 @import bootstrap 之前定义，否则无效
也可以设为自定义值，比如：$form-control-focus-box-shadow: 0 0 0 0.1rem rgba(100, 150, 255, 0.3);
注意：此方式不影响通过 CDN 引入的 CSS，只适用于源码编译流程