:active 是瞬态伪类，仅在按下时生效，无法持久变色；要实现点击后保持颜色，需用 JS 切换 .active 类或借助 checkbox + :checked 模拟。

button:active 为什么点完就恢复原色？ 这不是样式没生效，而是 :active 本就是瞬态伪类：它只在鼠标按下、触屏按住、键盘空格键按下的那一小段时间内生效，手指一抬或按键一松，浏览器立刻切回默认状态。所以“点击后颜色不变”这个需求，:active 从设计上就做不到。

• :active 是交互反馈，不是状态记忆
• 移动端触摸时间极短，肉眼几乎看不到变化，容易误判为“没触发”
• 键盘 Enter 触发时，部分浏览器（如 Safari）甚至不触发 :active，只走 :focus 流程

想让按钮“点击后保持颜色”，得用状态切换逻辑 真正能持久改变按钮颜色的，是显式切换 CSS 类（比如加 .is-active），或靠 JS 控制 .active 类（Bootstrap 原生支持该模式）。这和 :active 完全是两回事：

• Bootstrap 的 data-bs-toggle="button" 可以让普通按钮变成开关式按钮，点击后自动添加/移除 .active 类
• 需配合 btn + btn-{color} 基础类使用，例如：<button class="btn btn-primary" data-bs-toggle="button">切换</button>
• 自定义颜色时，别只改 :active，而要覆盖 .btn.active 的背景色，例如：.btn-primary.active { background-color: #28a745 !important; }
• 如果用纯 CSS 模拟（无 JS），可借助 <input type="checkbox"> + :checked + label，但语义和可访问性会打折扣

Bootstrap 中 .btn.active 样式被忽略的常见原因 即使加了 data-bs-toggle="button"，颜色还是不变，大概率是 CSS 覆盖失败：

• Bootstrap 默认的 .btn-primary.active 权重不够，被后续加载的 CSS 或框架内置规则压过
• 没写全选择器：只写 .active { background-color: red; } 不行，必须写成 .btn.btn-primary.active 才能匹配到
• 使用了 !important 但位置不对，或被更高优先级的 inline style 覆盖
• 按钮本身有 disabled 属性，此时 .active 类会被视觉降级（透明度、指针禁用），颜色变化被掩盖

移动端点一下没反应？检查:focus 和 outline 干扰 很多情况下不是颜色没变，而是蓝色焦点边框（outline）或阴影（box-shadow）抢了注意力，甚至盖住了背景色：

• 默认 .btn:focus 会加蓝边+阴影，干扰主色呈现
• 清除方式要写全：.btn:focus, .btn.active:focus, .btn:active:focus { outline: none; box-shadow: none; }
• 注意：移除 outline 会影响键盘用户可访问性，生产环境建议用 outline-offset 或替换为更友好的聚焦样式，而非直接删光

按钮点击后颜色“不变”的本质，是混淆了瞬时反馈（:active）和持久状态（.active 类）。真要持久变色，就得交由 js 控制类名，或用表单控件绑定状态——css 本身没有“记住点击”这个能力。

VPS Bootstrap

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

下载