iOS Safari 仅支持半透明色值设置 -webkit-tap-highlight-color，如 rgba(255,0,0,0.3)，纯色或不透明色会被忽略；更可靠的方式是用 :active + CSS 变量 + transition 模拟反馈，并配合 touch-action: manipulation 消除延迟。
移动端点击高亮颜色为什么不能直接用
覆盖？
因为 iOS Safari（包括所有基于 WebKit 的 iOS 浏览器）只允许对
设置半透明色值，纯色或不透明色会被忽略——比如设成
或
实际无效，必须带 alpha 且小于 1，例如
才生效。
常见错误现象：写了
却没反应，不是语法错，是浏览器主动丢弃了这个声明。
仅支持 WebKit 内核，Chrome Android、Firefox Android 完全不识别该属性
无法控制高亮形状（始终是矩形）、延迟、动画时长
若页面启用了
或
，高亮可能被意外抑制
用 CSS 变量 +
模拟可控触摸反馈更可靠
真机上最稳定的方式是绕过系统高亮，自己用
配合
或
做视觉反馈，再用 CSS 变量统一管理颜色。
使用场景：按钮、卡片、导航项等需要明确“已按下”状态的交互元素。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
必须加
，否则
状态切换生硬，像卡顿
避免用
做反馈——会透出下层内容，尤其在滚动容器里容易错位
Android Chrome 对
的触发有约 300ms 延迟（除非已启用
）
是提速关键，但别乱加
它告诉浏览器：“这个区域只做点击/滑动，不用等 300ms 判定是否双击”，能消除
延迟，也能让
更快响应。
性能影响：开启后，该元素内双击缩放、长按选中文本等功能失效，所以只应加在明确无文本选择需求的控件上。
适用：
、
（跳转用）、自定义
按钮
禁用：
、
、含可复制文本的容器
兼容性好，iOS 9.2+、Android 4.4+ 均支持
真机调试时最容易被忽略的点
开发时在桌面 Chrome 模拟移动设备，
状态几乎不触发——因为没真实 touch 事件。必须连真机调试，或用 Safari 的「Responsive Design Mode」并勾选「Simulate Touch Events」。
iOS 上，如果父容器有
且子元素超出，
可能不触发（WebKit bug，需加
强制硬件加速修复）
CSS 变量名别用
这类太泛的，建议带作用域如
，避免被第三方样式意外覆盖
不要试图用 JS 监听
来加 class 模拟 active——增加复杂度且易漏掉
清理逻辑
事情说清了就结束
-webkit-tap-highlight-color-webkit-tap-highlight-colorredrgba(255,0,0,1)rgba(255,0,0,0.3)-webkit-tap-highlight-color: #ff0000;user-select: nonepointer-events: none:active:activebackground-colorbox-shadowbutton {
--tap-color: rgba(0, 120, 255, 0.1);
transition: background-color 0.15s ease;
}
button:active {
background-color: var(--tap-color);
}
/* 全局覆盖时可写在 :root */
:root {
--tap-color: rgba(255, 64, 64, 0.12);
}transition:activeopacity:activetouch-action: manipulationtouch-action: manipulation:active-webkit-tap-highlight-colorbuttonadivparticle:activeoverflow: hidden:activetransform: translateZ(0)--highlight--btn-tap-bgtouchstarttouchcancel