bootstrap 5.3 主动移除了按钮 :active 和 :focus 状态下的 box-shadow，以减少视觉干扰并交还焦点控制权；需通过自定义 .btn:focus { box-shadow: ... } 恢复高亮，禁用 outline 或 border 不推荐。
Bootstrap 5 按钮点击后蓝色外边框（focus-ring）为何消失？
不是你漏写了 :focus 或 JS 失效，是 Bootstrap 5.3 主动移除了 :active 和 :focus 状态下的 box-shadow。这是框架级行为——为减少默认视觉干扰、把焦点样式控制权交还给开发者和可访问性工具（如屏幕阅读器）。所以你点按钮没“亮”，不是 bug，是 intentional design。
想保留或替换点击/聚焦高亮，该改哪？
必须用 box-shadow，别碰 outline 或 border：
-
outline颜色难统一，且 Chrome/Firefox 可能强制覆盖为系统焦点色（比如深蓝或紫边），不可控 -
border会触发重排：加 2px 边框 → 宽高微变 → 周围元素抖动，尤其在.btn-group或栅格中明显 -
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)是 Bootstrap 官方 focus-ring 的实现方式：不占布局、颜色可配、过渡平滑
推荐写法（加在自定义 CSS 文件末尾，确保覆盖 Bootstrap）：
.btn:focus {
box-shadow: 0 0 0 0.25rem rgba(72, 114, 219, 0.5); /* 改成你喜欢的蓝，或绿色/橙色 */
}
.btn:focus:not(:focus-visible) {
box-shadow: none; /* 防止键盘 tab 时出现双影（鼠标点击后不显示） */
}
动态激活态（如单选按钮、模态框内状态按钮）怎么高亮？
依赖 :focus 或 :active 不行——它们瞬时消失。必须绑定到持久状态：
- 单选/复选场景：用
input:checked + label.btn，例如input#mode-auto:checked + label.btn，只对当前选中的按钮加box-shadow - 模态框内根据后台数据激活：服务端渲染时直接加类，如
<button class="btn btn-outline-success btn-status-active-success"></button>，对应 CSS 中定义.btn-status-active-success { box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); } - JS 动态切换时，用
element.classList.toggle("btn-status-active-success")，别直接操作style.boxShadow（不利于维护和主题切换）
为什么有些按钮点了还是没反应？检查这三点
常见静默失败原因：
- 没加
tabindex="0"：自定义按钮（如<div class="btn">）默认不可聚焦，<code>:focus不触发 - CSS 加载顺序错：你的自定义样式在 Bootstrap CSS 之前引入，被覆盖
- 用了
data-bs-toggle类（如data-bs-toggle="modal"）但没引入 Bootstrap JS —— 此时按钮可能被禁用或 focus 行为异常
最稳妥的验证方式：打开 DevTools → Elements 面板 → 点按钮 → 看对应元素是否短暂出现 :focus 伪类标记；如果没有，先确认 tabindex 和 JS 加载状态。
