Bootstrap输入框焦点阴影颜色设置方法

聊一个 Bootstrap 5 中常见的痛点：许多开发者都希望更改输入框获取焦点时的默认蓝色阴影。直接修改 `$primary` 变量往往无效，那么这个蓝色阴影到底来自哪里？如何彻底控制它？下面详细拆解。 ### Bootstrap 5 中 `:focus` 蓝色阴影由 `box-shadow` 控制，并非颜色变量直接设定 Bootstrap 5 默认通过 `box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)` 实现聚焦高亮效果。这里的 `rgba(13, 110, 253, 0.25)` 是主色 `$primary` 的半透明版本，但本质上它是一段**阴影叠加效果**，而不是一个独立的“蓝色阴影颜色”属性。 * 该阴影值直接写入 `.form-control:focus` 等多个选择器的 CSS 规则中，并非由一个 CSS 变量统一控制。 * 要修改它，必须覆盖原始规则。仅修改 `$primary` 变量行不通——那会导致按钮、链接等其他元素也跟着变色。 * 如果使用 Bootstrap 官方 CDN 或预编译的 CSS，修改时大概率需要借助 `!important`。 ### 覆盖默认聚焦阴影的两种可靠方式 推荐优先使用 CSS 自定义属性（Custom Properties）方式，兼容性好且维护方便。如果需要更精细的控制，或兼容旧版浏览器，再采用传统覆盖方式。 * **方式一（推荐）：重设 `--bs-form-control-focus-box-shadow` 变量** 在全局样式中添加以下代码即可： ```css :root { --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.4); } ``` 注意：该变量仅影响 `.form-control`、`.form-select` 等原生表单控件，对 `.btn` 完全无效。 * **方式二（兜底）：直接覆盖选择器** ```css .form-control:focus, .form-select:focus, .was-validated .form-control:valid:focus, .was-validated .form-select:valid:focus { box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.4) !important; } ``` 这里的 `!important` 必须添加，否则很容易被 Bootstrap 原始样式权重覆盖。 ### 为什么修改了 `$primary` 却没有生效？ 这背后是 Bootstrap 5 的 SCSS 编译逻辑。`$primary` 只负责生成初始调色板和部分组件的基础色，而聚焦阴影是通过 `box-shadow` 函数单独计算的。默认它会调用 `rgba($primary, .25)`，但这个计算**发生在编译时**，而非运行时动态读取变量。 * 如果使用的是已经编译好的 `bootstrap.min.css`，修改 SCSS 变量自然毫无作用。 * 即使自建 SCSS 构建流程，也必须确保 `$enable-important-utilities: true`，或者手动重写 `form-control.scss` 中的 `:focus` 规则。 * 最简单的验证方法：打开浏览器开发者工具，检查 `.form-control:focus` 的 computed `box-shadow`，查看它是否已被自定义样式覆盖。 ### 别忽略表单验证状态下的聚焦样式 这部分是很多开发者踩坑的地方。Bootstrap 对 `.was-validated .form-control:valid:focus` 和 `:invalid:focus` 有独立的阴影规则，它们默认使用 `$success` / `$danger` 颜色，**完全不受 `--bs-form-control-focus-box-shadow` 变量的影响**。 * 要统一风格，必须额外覆盖这些选择器。例如： ```css .was-validated .form-control:valid:focus, .was-validated .form-select:valid:focus { box-shadow: 0 0 0 0.25rem rgba(46, 204, 113, 0.4) !important; } ``` * 或者，也可以直接禁用验证状态的聚焦覆盖（不推荐）： ```css .was-validated .form-control:valid:focus { box-shadow: none; } ``` 实际项目中，很多人把验证态和普通聚焦态的阴影当作一回事来处理，结果上线后才发现：输入正确时阴影变绿、错误时变红——这是最容易被忽略的视觉断层点。