:active在Bootstrap按钮上不生效，主因是Bootstrap默认规则优先级更高、移动端触发时间极短、焦点状态缺失，且v5.3+用box-shadow模拟按下态覆盖自定义样式；需提高选择器优先级、重置box-shadow、慎用transform，并推荐JS切换class实现可靠反馈。
为什么 :active 在 Bootstrap 按钮上不生效
直接给 Bootstrap 按钮加 :active 样式常常没反应，不是你的 CSS 写错了，而是 Bootstrap 自带的 .btn:focus 和 .btn:active 规则优先级更高，且部分版本（如 v5.3+）用 box-shadow 模拟按下态，覆盖了你写的背景色或边框变化。
更关键的是：移动端点击会触发 :active 但持续时间极短（约 100ms），肉眼难察觉；而桌面端若未聚焦，:active 可能根本不触发——因为鼠标按下时焦点未必落在按钮上。
- 检查是否被
.btn:focus-visible或.btn:active的默认规则覆盖（用浏览器开发者工具「Computed」面板看最终生效样式） - 确保按钮有
tabindex="0"或本身可聚焦（如默认可聚焦，需手动加tabindex） - 避免只依赖
:active做核心反馈，它不适合做持久状态提示
覆盖 Bootstrap 默认 :active 的正确写法
必须提高选择器优先级，并明确重置可能干扰的属性。推荐用 .btn.my-btn:active 这类组合，而不是泛泛的 button:active。
.btn.my-btn:active {
background-color: #2c3e50 !important;
border-color: #1a252f !important;
box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !important;
transform: translateY(1px); /* 微位移增强按下感 */
}
-
!important在这里不是偷懒，是必要手段——Bootstrap 的:active规则带!important（v5.3+），你也得对齐 - 务必重写
box-shadow，否则默认的蓝色 focus shadow 会残留 - 慎用
transform: scale()：部分安卓 WebView 对scale在:active下支持不稳定，translateY更稳妥
移动端点击反馈失效的替代方案
iOS Safari 和部分安卓浏览器对 :active 有延迟或禁用机制（尤其在 上无 touchstart 监听时）。这时纯 CSS 已不可靠。
更可控的做法是用 JavaScript 主动切换 class：
<button class="btn btn-primary" data-bs-toggle="active-feedback">提交</button>
<p><script>
document.querySelectorAll('[data-bs-toggle="active-feedback"]').forEach(btn => {
btn.addEventListener('touchstart', () => btn.classList.add('is-pressed'));
btn.addEventListener('touchend', () => btn.classList.remove('is-pressed'));
btn.addEventListener('mousedown', () => btn.classList.add('is-pressed'));
btn.addEventListener('mouseup', () => btn.classList.remove('is-pressed'));
});
</script></p><p><style>
.btn.is-pressed {
background-color: #2c3e50 !important;
transform: translateY(1px);
}
</style></p>
- 同时监听
touchstart/touchend和mousedown/mouseup，覆盖触屏与鼠标场景 - 不用
click事件——它触发太晚，用户松手后才执行，失去即时反馈意义 - 注意移除 class 的时机：用
touchend而非touchcancel，后者在滑出按钮区域时才触发，容易遗留is-pressed
和 :focus、:hover 的协同要点
自定义 :active 不能孤立处理。用户从悬停到点击再到释放，状态应连贯：
-
:hover和:active的背景色差建议 ≥ 15% 明度差，否则看不出按下变化 - 如果按钮需要键盘操作（Tab 进入），
:focus样式必须保留且明显，不能为了统一视觉而删掉 outline - 避免
:focus:active同时生效时产生冲突——比如:focus加了外阴影，:active又加内阴影，叠加后视觉混乱 - 测试真实键盘流：Tab 到按钮 → Space 键触发 → 观察是否触发
:active（现代浏览器中 Space 键会触发mousedown+mouseup，所以 JS 方案同样适用）
最常被忽略的是键盘用户的 :active 体验——他们不用鼠标，但依然需要按下反馈。纯 CSS :active 对键盘操作支持有限，JS 切换 class 是目前最兼容的解法。
