-webkit-tap-highlight-color: transparent 仅在 WebKit 浏览器（如 iOS Safari）中生效，需作用于可激活元素（如 button、role="button" 或 tabindex="0" 元素），且必须配合 user-select: none 才能彻底消除 iOS 15.4+ 残影；非 WebKit 浏览器（Chrome 62+、Firefox）已移除支持。
直接写 -webkit-tap-highlight-color: transparent 没反应？先确认浏览器和元素是否支持
这个属性只在 WebKit 内核浏览器里生效，比如 iOS Safari、微信 X5（部分版本）、QQ 浏览器等；Android Chrome 62+ 和 Firefox 已完全移除支持，写了也无效。不是代码错了，是目标浏览器根本不认它。
它还只对“可激活元素”起作用，不是所有带 onclick 的 div 都自动命中。必须满足以下任一条件：
-
a、button、input[type="button"]等原生语义化标签 - 自定义元素显式声明
role="button"或tabindex="0"（注意不能是-1） - 同时监听了
click或touchstart事件
动态渲染的节点（如 Vue 的 v-if、React 的 useState 切换）如果没同步 role 或 tabindex，高亮会重新出现。
-webkit-tap-highlight-color 的合法值只有 transparent 和 rgba(0,0,0,0)
写成 none、unset、initial、空字符串，甚至 rgba(0,0,0,0.001)，在某些旧版 Safari 里都可能失效。最稳妥的是统一用 transparent。
立即学习“前端免费学习笔记（深入）”；
它控制的是点击瞬间叠加在元素上方的半透明图层背景色，不是文字色、边框色，也不是 :active 的状态样式。所以：
-
a:active { background: red; }压不住它——高亮层会盖在background上面 -
outline: none对它完全没影响 - 不能写在伪类里，必须是元素的常态 CSS 规则
iOS 15.4+ 还有灰白残影？加 user-select: none 才算真正干净
单独设 -webkit-tap-highlight-color: transparent 在较新 iOS 上仍可能残留微弱闪烁。这不是高亮没关掉，而是系统默认的文本可选行为触发了重绘干扰。
必须配合 user-select: none 才能彻底消除。但要注意：
- 如果按钮里含需复制的内容（如电话号码、地址），不能整块禁用，应把可选文本用
span包裹并单独设user-select: text - 别用
* { -webkit-tap-highlight-color: transparent; }—— 某些 WebView 下会导致textarea或select失去可访问性反馈，甚至白屏
推荐收口写法：
code>a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"] {
-webkit-tap-highlight-color: transparent;
user-select: none;
}关掉高亮后，:active 样式得补上，否则用户点下去没反馈
-webkit-tap-highlight-color 是系统级视觉反馈，关掉它不等于交互完成。真机上 :active 状态极短且延迟明显，纯靠改背景色基本不可见。
更可靠的主动反馈方式是：
- 用
transform: scale(0.98)配合transition，轻量无重排 - 避免只改
background-color，容易和主题色冲突或被高亮层覆盖 - 如果用
div模拟按钮，除了样式，还得加role="button"和cursor: pointer，否则屏幕阅读器可能跳过
真正麻烦的从来不是加一行 CSS，而是关掉系统反馈后，你得自己把反馈做全、做对、做可访问。
