-webkit-tap-highlight-color: transparent 是唯一能真正关掉 ios safari 和微信 x5 点击高亮的 css 方式，仅对 a、button、input[type="button"]、[role="button"] 等可激活元素生效，android chrome 62+ 已完全无视；outline: none 和 :active 均无效，因高亮是 webkit 渲染层独立合成图层，与焦点和伪类机制无关。
-webkit-tap-highlight-color: transparent 是唯一能真正关掉 iOS Safari 和微信 X5 内核点击高亮的 CSS 方式，但它只对可激活元素生效，且 Android Chrome 62+ 已完全无视该属性。
为什么 outline: none 和 :active 都不管用
点击高亮是 WebKit 渲染层独立绘制的合成图层，和 CSS 焦点、伪类完全无关：outline: none 只影响键盘聚焦边框；:active 在 iOS 上有约 300ms 延迟，且触发窗口极短，根本覆盖不了高亮层。你给 a:active 加了背景色，点下去还是看到蓝灰块——那正是 -webkit-tap-highlight-color 在起作用。
必须写在哪些元素上才生效
它不继承，不能挂 body 或 *，必须显式匹配可激活元素：
-
a、button、input[type="button"]、input[type="submit"] - 带
role="button"或tabindex="0"的div - 含
onclick或ontouchstart属性的元素（注意：不匹配 JSaddEventListener绑定）
推荐选择器组合：
a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"] { -webkit-tap-highlight-color: transparent; }
值写错、位置错、测试错的三个高频坑
常见失效不是代码没写，而是踩中这些硬约束：
- 值必须是
transparent或rgba(0,0,0,0)；none、unset、rgba(0,0,0,0.01)全部无效 - 写在伪类里（如
a:active）或父容器上，子元素不会继承 - 桌面 Chrome 模拟器默认关闭高亮，开发时完全看不到问题；必须用真机测 iOS Safari 和 Android Chrome 各一次
Vue/React 动态插入的节点（比如 v-if 切换后的新按钮）不会自动命中样式，得确保 class 或 role 被正确带上。
iOS 15.4+ 残影和微信 X5 的隐藏依赖
即使写了 transparent，iOS 15.4+ 仍可能闪一下灰白——这不是样式失效，而是文本可选行为引发的重绘干扰。此时加 -webkit-user-select: none 才算真正“干净”，但要注意：它会禁用长按复制，含电话、地址等可操作文本时，得用包裹方式局部放开 user-select: auto。
微信 X5 内核要求页面必须有完整 <meta name="viewport">，且部分版本还依赖 user-scalable=no 才启用该样式。漏掉这个 meta，CSS 就等于白写。
真正麻烦的从来不是加这一行 CSS，而是它只在真实触摸环境里存在、只对特定内核有效、还和可访问性提示共存——关得太彻底，键盘用户就找不到焦点在哪了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
