-webkit-tap-highlight-color: transparent 能关闭 iOS Safari 点击高亮，但仅对 a、button、input[type="button"]、[role="button"]、[tabindex="0"] 等可激活元素生效，需写在元素自身样式中，值必须为 transparent 或 rgba(0,0,0,0)，且须配合 viewport 和 user-select: none 防残留。
-webkit-tap-highlight-color: transparent 能关掉 iOS Safari 和部分 Android 浏览器的点击高亮，但只对真正可激活的元素生效，挂错地方或写错值就等于没写。
为什么写了 -webkit-tap-highlight-color: transparent 还有灰块？
不是代码没加，而是它根本没作用到目标元素上：
- 写在
body或* {}里——该属性不继承，父级声明对子元素无效 - 目标是普通
div但没加role="button"或tabindex="0"——Safari 不认为它是可点击元素，连高亮都不会触发，更别说“关”了 - 值用了
none、unset或rgba(255,255,255,0)——WebKit 只认transparent或严格rgba(0,0,0,0)，alpha 必须为 0 - 样式被 UI 库（如 Vant、WeUI）或 scoped style 覆盖——检查 computed styles，确认该属性是否被更高权重规则干掉
哪些选择器能真正命中可点击元素？
必须明确匹配浏览器认定的“可激活元素”，推荐用这些组合：
-
a、button、input[type="button"]、input[type="submit"] -
[role="button"]、[tabindex="0"]——覆盖自定义按钮 -
[onclick]、[ontouchstart]——注意：只匹配内联事件，不匹配addEventListener绑定的节点 - 避免
* { -webkit-tap-highlight-color: transparent; }——某些 Android WebView 会重绘异常，且可能破坏textarea的可访问性反馈
真机测试时最容易漏掉的三个点
模拟器看不到问题，等上线才发现满屏蓝灰块：
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools 的设备模拟默认关闭 tap 高亮，开发阶段完全无感知
- iOS Safari 必须配合
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">才稳定生效；微信 X5 内核甚至要求user-scalable=no存在才启用该样式 - Vue/React 动态渲染的节点（如
v-if切换后插入的按钮）不会自动继承样式，得确保 class 或 role 同步，或用::v-deep/:global提升作用域
最麻烦的不是怎么写这行 CSS，而是它只在真实触控下存在、只对 WebKit 内核起效、还和可访问性提示强耦合——关掉之后，:active 也压不住它，你得自己补缩放或变色反馈，否则用户根本不知道点没点上。
