为什么Bootstrap 5中用CSS修改输入框聚焦阴影会失效？-css教程-PHP中文网

因为bootstrap 5原生规则带!important，同级选择器权重不足会被覆盖；必须加!important或提高选择器权重，且自定义css需在bootstrap.css后加载。

为什么bootstrap 5中用css修改输入框聚焦阴影会失效？

为什么写了 `.form-control:focus { box-shadow: none }` 却没效果？

不是 CSS 写错了，而是选择器权重不够——Bootstrap 5 的原生规则是 .form-control:focus 带 !important，你写的同级规则会被直接覆盖。开发者工具里如果看到你的 box-shadow 被划掉，基本就是这个原因。

实操建议：

VPS Bootstrap

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

下载

必须加 !important：比如 .form-control:focus { box-shadow: none !important; }
或提高选择器权重：用 .my-form .form-control:focus 或 input.form-control:focus，避免和 Bootstrap 原生规则“撞车”
确认加载顺序：自定义 CSS 文件必须放在 bootstrap.css 之后引入，否则即使写对了也白搭

为什么改了 `box-shadow`，边框颜色还是变蓝？

因为 box-shadow 和 border-color 是两套独立控制逻辑。Bootstrap 5 聚焦时默认同时改了这两项：border-color: #86b7fe + box-shadow: ...rgba(13, 110, 253, 0.25)。只动 shadow 不碰 border，边框照样会变色。

实操建议：

要彻底统一视觉，得一起覆盖：border-color 和 box-shadow 都显式声明
别依赖 border-color: initial——它可能回退到用户代理样式，行为不可控
深色背景上边框变灰？不是颜色选错，是 border-color 值本身在暗色下对比度不足，换更亮的色值（如 #6366f1）比调透明度更有效

为什么导航栏里的输入框聚焦阴影“看不见”？

不是样式没生效，是被 .navbar 的 overflow: hidden 裁掉了。Bootstrap 默认给 navbar 设了这个属性，而 box-shadow 是向外绘制的，超出父容器边界就被剪掉了。

实操建议：

给输入框加 position: relative 和 z-index: 2，让它浮出裁剪层
必须带 .navbar 前缀重写：.navbar .form-control:focus { box-shadow: ... !important; }
如果用了 .navbar-dark，注意它的 $primary 被设为浅色（如 #f8f9fa），导致生成的 shadow 在深色背景上发灰——得单独写 .navbar-dark .form-control:focus 覆盖

为什么键盘聚焦没反应，鼠标点击却有？

Bootstrap 5.3+ 默认启用了 :focus-visible，它只在键盘导航时触发，鼠标点击后焦点态会自动降级为普通 :focus。如果你只写了 .form-control:focus，键盘用户根本看不到光晕。

实操建议：

必须同时写两个伪类：.form-control:focus 和 .form-control:focus-visible
:focus-visible 规则也要加 !important，否则会被 Bootstrap 原生带 !important 的 :focus 规则压制
别删 outline：移除后必须补足视觉反馈，否则键盘用户无法识别当前焦点位置