-webkit-tap-highlight-color: transparent 是唯一有效解法，但仅对 iOS Safari 和微信 X5 等 WebKit 内核生效；Android Chrome 62+ 已彻底忽略该属性，无法跨平台起作用。
-webkit-tap-highlight-color: transparent 是唯一有效解法，但只对 iOS Safari 和微信 X5 等 WebKit 内核生效；Android Chrome 62+ 已彻底忽略该属性，别指望它跨平台起作用。
为什么 :active 和 outline: none 都无效
点击高亮是 WebKit 渲染层独立绘制的 overlay，和 CSS 伪类生命周期完全分离：:active 只在“手指按下未松开”极短窗口内触发（且 iOS 上有约 300ms 延迟），而高亮在 touchstart 瞬间就渲染，持续到 touchend 后一小段时间。它也不走 outline 流程——哪怕你写了 outline: none，高亮照常出现。
常见错误现象包括：
-
a:active { background: transparent; }在 iOS Safari 上基本不生效 -
input:focus { outline: none; }只影响键盘焦点框，对触控高亮零作用 - 某些安卓 WebView 甚至会忽略
:active，连压感样式都出不来
必须写在可点击元素上，且值只能是 transparent 或 rgba(0,0,0,0)
这个属性不继承，不能挂错位置，也不能用错值。它只对真实触发 tap 行为的元素起作用，比如 <a>、<button>、带 onclick 或 ontouchstart 的 <div>，或明确声明 role="button" 的容器。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"] {
-webkit-tap-highlight-color: transparent;
}务必避免：
- 写
* { -webkit-tap-highlight-color: transparent; }—— 某些 WebView（如旧版微信 X5）会因此白屏或卡顿 - 写在
body或父容器上，子元素不会继承 - 值写成
none、unset、initial—— 这些被完全忽略
真机测试时最容易漏掉的三个点
桌面 Chrome 的设备模拟器默认不触发 tap 高亮，开发阶段完全看不到问题。必须在真实设备上验证：
- iOS Safari（尤其 iOS 17+）和 Android Chrome for Android 各测一次；Android Chrome 62+ 已彻底移除对该属性的支持，别指望它在所有安卓机上起效
- Vue/React 动态插入的元素（如
v-if切换出的按钮、useState更新后渲染的<div onclick>）不会自动继承父级样式，需确保它们也命中上述选择器 - 用了 FastClick 或
touch-action: manipulation，高亮可能消失——但这不是 CSS 生效了，而是事件流被拦截，反而掩盖真实问题
关掉之后必须补 :active 反馈，否则用户点不动
高亮本质是触控反馈。关掉后，用户点下去没视觉响应，容易误判是否点中。务必给按钮类元素加 :active 样式，比如：
-
transform: scale(0.98)—— 比改背景更轻量、无重排 -
opacity: 0.8—— 注意别和高亮层叠加导致灰度异常
如果用 <div> 模拟按钮，除了 -webkit-tap-highlight-color: transparent，还得加 cursor: pointer 和 role="button"，否则屏幕阅读器可能忽略。真正麻烦的从来不是加一行 CSS，而是关掉系统反馈后，你得自己把反馈做全、做对、做可访问。
