Bootstrap按钮点击后颜色“停留”实为:focus状态残留，并非:active伪类所致；:active仅在按下瞬间生效，而:focus在点击后持续存在，需覆盖.btn:focus等高权重选择器或用JS切换.active类实现持久变色。
Bootstrap 按钮点击后颜色“停留”不是 :active 的事
点击后颜色一直不恢复，说明你看到的不是 :active（瞬时按下态），而是 :focus 状态残留。浏览器在鼠标点击按钮后会自动赋予焦点，而 Bootstrap 默认对 .btn:focus 设置了 box-shadow 和部分背景微调，只要焦点没被清除，这个“高亮色”就一直挂着。
常见错误是反复改 .btn:active，结果毫无反应——因为手指一抬，:active 就消失了，根本留不住。
-
:active只存在于按下到松开的毫秒级窗口，无法“停留” - 真正造成颜色/阴影“卡住”的，90% 是
:focus或:focus-visible - 移动端 Safari、部分 Android WebView 里，点击后焦点行为更不稳定，容易误判为样式失效
.btn:focus 样式覆盖必须带权重，不能只写 button:focus
Bootstrap 5 的 .btn:focus 规则来自多个组合选择器（比如 .btn-primary:focus、.btn-outline-success:focus），直接写 button:focus 或 .btn:focus 很可能被忽略——权重不够。
稳妥写法是复刻它的特异性层级：
.btn:focus,
.btn.btn-primary:focus,
.btn.btn-secondary:focus,
.btn.btn-success:focus,
.btn.btn-danger:focus {
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
background-color: #e9ecef !important;
}
- 别漏掉带变体类（如
.btn-primary）的规则，否则只有默认按钮生效 -
!important在这里不是坏习惯，而是绕过 Bootstrap 编译后高权重 CSS 的实际需要 - 如果用 CSS 变量控制主题色，优先改
--bs-btn-focus-shadow-rgb和--bs-btn-hover-bg，但注意这些变量仅在 Bootstrap 5.3+ 生效
要真让颜色“停留”，得靠 JS 切换 .active 类
如果你的需求确实是“点一下就变色，再点一下恢复”，那 :active 和 :focus 都不合适——它们不是状态记录器。必须用 JavaScript 显式管理状态，并配合 Bootstrap 原生支持的 .active 类。
示例（原生 JS）：
document.querySelectorAll('.btn-toggle').forEach(btn => {
btn.addEventListener('click', function() {
this.classList.toggle('active');
});
});
- Bootstrap 的
.btn.active本身就有定义（比如深色背景 + 白字），无需额外写样式 - 避免用
onclick="this.classList.toggle('active')"写在 HTML 里，不利于维护和事件解耦 - React/Vue 中应绑定 state 控制 class，而不是直接操作 DOM 类名
- 注意：禁用状态（
disabled）下.active不会触发视觉变化，需单独处理
移动端 focus 残留更顽固，blur() 要加在合适时机
iOS Safari 和某些安卓 WebView 在点击后不会自动 blur 按钮，导致蓝色边框或阴影一直挂着，甚至影响后续 tab 导航。光靠 CSS 不够，得 JS 主动干预。
关键不是“点了就 blur”，而是“完成交互逻辑后再 blur”：
- 同步操作（如跳转、切换 class）：直接在 click 回调末尾加
this.blur() - 异步操作（如 API 请求后弹提示）：把
blur()放进.then()或回调函数里，否则用户还没看到反馈，焦点就丢了 - 模态框关闭按钮这类场景，blur 后建议
setTimeout(() => focusNextElement(), 0)，保证键盘流不中断 - 别对所有按钮无差别
blur()——表单内连续输入的按钮（如“+ 添加一行”）blur 后会导致用户必须重新 tab 才能继续，体验断裂
