-webkit-tap-highlight-color: transparent 可关闭 ios 和部分旧 android 的点击高亮，但 android chrome 62+ 已彻底移除支持，firefox 从未实现，且需作用于显式可点击元素（如 a、button 或带 role="button" 和 tabindex="0" 的 div），不继承、不全局生效。
直接写 -webkit-tap-highlight-color: transparent 就能关掉 iOS 和部分旧 Android 的点击高亮，但别指望它在所有设备上都生效——Android Chrome 62+ 已彻底忽略这个属性。
为什么 -webkit-tap-highlight-color 经常失效
这不是你代码写错了，而是浏览器行为本身就不统一：
- Android Chrome 从 62 版本起完全移除了对该属性的支持，写了也白写
- Firefox 从来就没实现过，连解析都不解析
- 微信 X5 内核要求
<meta name="viewport">必须包含user-scalable=no才可能启用该样式，缺一个字段就失效 - 元素没加
role="button"或tabindex="0"，Safari 可能根本不把它当可点击目标，属性自然不触发
哪些元素必须显式设置 -webkit-tap-highlight-color
这个属性不会继承，也不能靠父级样式“顺带”覆盖。必须落在实际可点击的节点上：
-
a、button、input、textarea、select这类语义化元素要单独加 - 用
div或span模拟按钮时，得同时满足：[onclick]+role="button"+tabindex="0"，三者缺一不可 - 动态渲染的组件（比如 Vue 的
v-if、React 的useState切换）如果没复用已有 class，新插入的节点会漏掉该规则
:active 不能替代 -webkit-tap-highlight-color
两者根本不是一回事：
-
:active是 CSS 伪类，依赖用户“按下未松开”的状态，滑动离开再松手就压根不触发 -
-webkit-tap-highlight-color是 WebKit 渲染层叠加的图层，只要 tap 动作被识别就会出现，和 CSS 状态无关 - 写了
a:active { background: red }却仍有蓝灰遮罩？那说明高亮来自-webkit-tap-highlight-color，不是你的样式没生效 - iOS 上
:active默认有约 300ms 延迟，需额外加touch-action: manipulation才能同步响应
真正容易被忽略的细节
关掉系统高亮只是第一步，后续补全反馈链才是关键：
- 禁用后务必给所有可点击元素配
:active样式，哪怕只是transform: scale(0.98)或opacity: 0.8 - 输入框类元素（
input[type="checkbox"]、开关等）关掉高亮反而降低可感知性，建议保留或改用背景色变化替代 - 不要用
* { -webkit-tap-highlight-color: transparent }全局重置，某些 WebView 会因此渲染异常，尤其含伪元素的复杂布局 - 真机测试前，确认 Safari 和 Chrome for Android 都已启用该样式——桌面模拟器默认关闭高亮，根本看不出问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
