Bootstrap输入框表单控件如何用CSS自定义聚焦样式？-css教程-PHP中文网

直接覆盖--bs-form-control-focus-box-shadow变量最省事，bootstrap 5.3+已将其作为css自定义变量统一控制所有表单控件的:focus-visible阴影效果，需确保css加载在bootstrap主样式之后，并适配深色模式与组件封装穿透问题。

bootstrap输入框表单控件如何用css自定义聚焦样式？

直接覆盖 `--bs-form-control-focus-box-shadow` 变量最省事

Bootstrap 5.3+ 把聚焦阴影抽成统一变量，改 --bs-form-control-focus-box-shadow 就能一并影响 <input>、<select></select>、<textarea></textarea> 和自定义复选框。不用写一堆选择器，也不用担心漏掉某类控件。

必须确保你的 CSS 加载在 Bootstrap 主样式之后，否则变量会被重置。推荐放在 <style></style> 块末尾或独立 CSS 文件的最后：

:root {
  --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(106, 90, 205, 0.25);
}

RGBA 第四个参数（透明度）建议保持 0.25 左右：太低看不见，太高像荧光笔；别漏掉 0.25rem 这个扩散半径，否则看起来像边框而非阴影。

`.form-control:focus-visible` 才是真正生效的选择器

只写 .form-control:focus 往往无效——现代浏览器默认启用 :focus-visible 提升键盘可访问性，而 Bootstrap 5 的核心规则正是基于它。鼠标点击时 :focus 触发，但键盘 Tab 导航时只认 :focus-visible。

以下写法才能真正命中：

VPS Bootstrap

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

下载

.form-control:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(106, 90, 205, 0.25) !important;
  border-color: #6a5acd !important;
}

必须加 !important —— Bootstrap 原生规则带 !important，不加会被覆盖
别漏掉 :focus-visible；仅写 :focus 在键盘 tab 导航时无反馈，违反 WCAG
某些封装组件（如 React-Bootstrap 的 <form.control></form.control>）会把原生 <input> 包在 <div> 里，导致选择器无法穿透，此时要升级选择器权重：<code>.my-form .form-control:focus-visible
深色模式下光晕发灰？不是颜色错，是透明度没调

默认 rgba(13, 110, 253, 0.25) 在深色背景上对比度不足，看起来像脏灰边，不是变量没生效。这不是 bug，是透明度和背景色叠加后的视觉结果。

解决方案是提高 color 亮度并略微加大 spread 值，增强对比：
```
@media (prefers-color-scheme: dark) {
  .form-control:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(139, 195, 74, 0.3) !important;
  }
}
```
- 不要依赖 color-mode 类自动切换——Bootstrap 5.3+ 才原生支持，老项目需手动监听并切换 class
- 深色模式下推荐 alpha ≥ 0.3，同时选更亮的 base color（比如绿色系比蓝色系更易看清）
- 如果用了 prefers-reduced-motion，部分 focus 动画会被禁用，需单独测试
移除光晕？别只写 box-shadow: none

单纯设 box-shadow: none 会彻底抹掉焦点状态，对键盘用户极不友好。真正要做的不是“删除”，而是“替换”或“定制”这个聚焦样式。

Bootstrap 本身已用 outline: 0 + box-shadow 替代原生 outline，所以你该做的是：
- 保留 outline: 0，否则原生 outline 会和新 box-shadow 叠加出现双线
- 用 border-color 或微调背景色补足视觉反馈，确保 WCAG AA 对比度 ≥ 3:1
- 若项目用了 CSS-in-JS 或构建工具（如 Vite），注意 CSS 加载顺序——自定义样式必须后于 Bootstrap CSS
- 对非 .form-control 元素（如 <button></button>）也生效，得单独覆盖：button:focus, .btn:focus 等
真正容易被忽略的是：你改的到底是最终渲染到页面上的那个元素——很多时候 shadow 没变，只是你改错了 selector 或变量名拼错成了 --bs-form-control-focus-shadow（少了个 box-）。