button:active伪类是实现按钮长按颜色变化的核心机制，需显式定义背景色并避免opacity/filter等降级方案，移动端须处理Safari延迟及兼容性问题。
button:active 伪类是控制长按颜色的核心
HTML 按钮在用户按住不放时触发 :active 状态，这是唯一被所有现代浏览器原生支持的“长按”响应机制（注意：不是 touchstart 或 mousedown 的 JS 模拟）。只改 :hover 或默认背景色，长按时颜色不会变。
常见错误是漏写 :active 规则，或把它写在 :hover 后面却没加 !important（当其他样式优先级更高时）。
- 必须显式定义
button:active { background-color: #1a5a1a; }，不能依赖继承 - 颜色深浅建议用比默认色深 15–25% 的 HEX/RGB 值，避免过深导致文字可读性下降
- 移动端 Safari 对
:active有约 300ms 延迟，需配合* { -webkit-tap-highlight-color: transparent; }消除点击高亮干扰
避免用 opacity 实现“变深”效果
opacity 会同时降低背景和文字透明度，导致文字发虚、对比度骤降，尤其在深色背景下极易不可读。这不是“颜色变深”，而是整体变灰。
真正变深应调整色值本身：
立即学习“前端免费学习笔记（深入）”；
- HEX 场景下，
#4CAF50→#2E7D32（取更暗的同色系标准 Material 色阶） - RGB 场景下，
rgb(76, 175, 80)→rgb(46, 125, 50)（R/G/B 各减约 30） - 慎用
filter: brightness(0.8)，它在部分安卓 WebView 中渲染异常，且影响子元素
兼容 iOS 和 Android 的长按反馈差异
iOS Safari 默认禁用 :active 样式，除非给 <body> 加 cursor: pointer 或给按钮加 touchstart 空事件监听器；Android Chrome 则默认启用但可能忽略快速轻点。
- 最简兼容写法：
<button onclick="void(0)">提交</button>（空 onclick 强制激活 active 状态） - 或用 CSS：
button { -webkit-tap-highlight-color: rgba(0,0,0,0); }+button:active { transform: scale(0.98); }辅助视觉确认 - 不要依赖
:focus替代:active，键盘聚焦和触屏长按行为完全不同
disabled 状态下 :active 会被忽略
如果按钮处于 disabled 状态，:active 伪类完全不生效——哪怕你写了样式也不会渲染。这点常被忽略，导致“按钮灰了但按下去没反馈”的错觉。
- 检查是否误用了
disabled属性而忘了同步处理交互逻辑 - 若需保留禁用态下的点击反馈，改用
pointer-events: none+ 自定义 class 控制视觉，而非原生disabled -
button:disabled:active是无效选择器，浏览器直接丢弃
实际项目里，最易被忽略的是 iOS 上 :active 默认失效这个点——没加 onclick 或 cursor: pointer，调试时在桌面 Chrome 看着正常，一到真机就毫无反应。
