:active无法实现点击后持久高亮，因其仅为瞬态伪类；应使用JavaScript切换.active类或checkbox+:checked模拟状态，并统一处理active/focus/focus-visible三态以保障可访问性。
做不到用 :active 实现“点击后保持高亮”——它只在按下瞬间生效，松手就消失。 真正能持久变色的，是 JavaScript 切换 .active 类，或用 checkbox + :checked 模拟状态。
为什么 :active 不能满足需求
浏览器规范里，:active 是瞬态伪类：鼠标按下时触发，一抬起来立刻失效。移动端触摸时间更短，几乎看不到变化；键盘按 Enter 触发时，部分浏览器（如 Safari）甚至不走 :active，只走 :focus。所以你反复调 button:active { background: red }，永远得不到“点完还红着”的效果。
用 JavaScript 切换 .active 类（推荐）
Bootstrap 原生支持 .active 类用于按钮的“激活态”，它会覆盖默认背景、边框和文字颜色，适配深色模式与主题切换。
- 确保按钮有唯一标识，比如
id="status-toggle-btn"或带明确 class（如class="btn btn-primary toggle-btn"） - 监听点击事件，在
DOMContentLoaded后绑定，避免 DOM 未就绪 - 用
classList.toggle('active')实现开关式切换，或classList.add('active')/classList.remove('active')控制单向状态 - 别直接改
element.className = 'active'，会清空其他必要 class（如btn btn-outline-success）
示例：
document.getElementById('status-toggle-btn').addEventListener('click', function() {
this.classList.toggle('active');
});
用 checkbox + :checked 避免 JS（适合简单开关）
如果你只需要“开/关”二值状态，且不想写 JS，可以用隐藏的 <input type="checkbox"> 配合相邻兄弟选择器控制按钮样式。
- 把
button改成label，内部放input[type="checkbox"]和可视文本 - 用
input:checked + .btn匹配被选中后的按钮，并设置背景色 - 注意：该方案无法响应外部 JS 状态变更，纯靠用户点击驱动
- 需加
aria-checked和role="switch"保证可访问性
示例结构：
<input type="checkbox" id="theme-toggle" class="d-none">
<label for="theme-toggle" class="btn btn-outline-secondary">夜间模式</label>
<style>
#theme-toggle:checked + .btn { background-color: #343a40 !important; color: #fff; }
</style>
容易被忽略的兼容点
点击后“颜色卡住”大概率不是 :active 没生效，而是 :focus 残留——浏览器点击按钮后自动聚焦，Bootstrap 默认给 .btn:focus 加了 box-shadow。如果你只改了背景色却没处理焦点样式，用户 tab 导航时视觉反馈会不一致。真正健壮的做法是三态统一：.btn.active（持久状态）、.btn:focus（键盘聚焦）、.btn:focus-visible（仅键盘聚焦时显示），否则 WCAG 可访问性检测会失败。
