必须显式设置 -webkit-tap-highlight-color 才能消除移动端点击高亮，仅改 background 无效；该属性是 iOS Safari 和微信等 WebKit 内核唯一支持的控制方式，推荐用 rgba(0,0,0,0) 而非 transparent，并需为所有交互元素单独设置。
-webkit-tap-highlight-color 必须显式设置，仅改 background 无效
移动端点击链接后出现的灰色半透明背景，不是元素自身的 background，而是浏览器（iOS Safari、微信 X5 内核等）在触摸层叠加的独立高亮蒙版。你给 a 元素设 background: transparent 或 background: none，完全不影响它——这个蒙版压根不走常规 CSS 渲染流程。
为什么必须用 -webkit-tap-highlight-color
- 该属性是目前唯一被 iOS Safari 和主流 WebKit 内核 WebView（如微信、QQ 浏览器）实际支持的控制方式
- 标准属性
tap-highlight-color无任何浏览器实现，写它等于没写 - 它不可继承，不能只写在
body或*上就一劳永逸（尤其注意：全局重置* { -webkit-tap-highlight-color: transparent; }会破坏<input type="checkbox">等控件的可访问性反馈）
哪些元素需要加这个样式
立即学习“前端免费学习笔记（深入）”；
所有可能被用户点到的交互元素，包括但不限于：
-
a、button -
input[type="button"]、input[type="submit"]、input[type="checkbox"] textarea- 带
onclick、ontouchstart的div或span，或已声明role="button"/tabindex="0"的语义化容器
推荐写法与兼容性细节
别用 transparent —— 它在 iOS 9–13 和部分微信旧版中会失效。稳妥写法是：
button,
a,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
textarea,
[role="button"],
[tabindex] {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}注意：rgba(0,0,0,0) 比 transparent 兼容性更广；不要加 !important，优先提高选择器权重（比如用 .btn:active 后补一句该属性）。
为什么加了还是有灰色块
常见真因不是代码漏写，而是被覆盖或干扰：
- 开发者工具里该属性显示为 strikethrough？说明被更高优先级样式（如 UI 库 Vant/WeUI 的 reset.css）覆盖了
- 元素同时设置了
user-select: none但没配-webkit-tap-highlight-color，iOS 下可能保留默认高亮 - 微信 X5 内核某些版本对
rgba(0,0,0,0)仍残留微弱灰边，可尝试rgba(0,0,0,0.01)降级处理 - 父容器有
touch-action: manipulation，可能提前拦截 tap 行为，导致高亮逻辑异常
禁用后必须补上视觉反馈
移除高亮不是终点，而是起点。用户点下去没变化，第一反应是“没点中”。所以务必同步做两件事：
- 给可点击元素加
:active样式，例如background-color: #f5f5f5或transform: scale(0.98) - 若用
div模拟按钮，必须加cursor: pointer和role="button"，否则屏幕阅读器无法识别，也影响部分 WebView 的 tap 触发
真正麻烦的不是写这一行 CSS，而是确认它在 iOS 15+、微信 8.0.42、X5 内核 6.0.x 这些环境里都生效——每个版本对 rgba() 解析、选择器匹配、伪类触发都有细微差异，漏掉一个，灰块就在某台 iPhone 上准时出现。
