移动端点击蓝色高亮需用 -webkit-tap-highlight-color: transparent; 关闭，该属性专用于 WebKit 内核，:active 无效因其触发机制与系统级 tap 高亮完全不同。
移动端点击蓝色高亮怎么关掉
默认情况下，iOS Safari 和部分 Android 浏览器在用户点击可交互元素（比如 <a></a>、<button></button>、带 onclick 的 <div>）时，会显示一个半透明的蓝色或灰色背景，这是 <code>tap-highlight-color 的表现。它不是伪类，也不是 :active，不能靠常规 CSS 重置。
用 -webkit-tap-highlight-color 直接覆盖
这个 CSS 属性专为 WebKit 内核设计，是唯一能控制点击高亮颜色的方式。不支持该属性的浏览器（如桌面 Chrome/Firefox）会忽略它，不影响兼容性。
实操建议：
- 设为
transparent是最稳妥的选择；设为rgba(0,0,0,0)效果一样，但没必要 - 只加在需要禁用高亮的元素上，比如
a、button、[onclick]或自定义交互容器 - 不要全局写
* { -webkit-tap-highlight-color: transparent; }，某些 WebView 里可能引发渲染异常
button,
a,
.tap-area {
-webkit-tap-highlight-color: transparent;
}为什么 :active 无效
:active 只在“按下未松开”瞬间生效，且受用户操作路径影响（比如滑动离开再松手，:active 就不会触发）。而 tap 高亮是系统级反馈，独立于 CSS 状态伪类，两者生命周期和触发条件完全不同。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 写了
a:active { background: none; }，但点击后仍有蓝灰遮罩 → 这是tap-highlight-color在起作用 - 在 iOS 上测试正常，Android 某些旧版 UC 或 QQ 浏览器仍显示高亮 → 它们可能不支持或部分支持该属性，需配合
user-select: none或pointer-events: none（慎用，会破坏交互）
真机调试时容易漏掉的点
开发阶段常在桌面 Chrome 模拟移动设备，但它的“移动端点击高亮”默认是关闭的，根本看不到问题。等上真机才发现满屏蓝灰块。
必须注意：
- 真机测试前，确认 Safari（iOS）和 Chrome for Android 都已启用该样式
- 如果用了 FastClick 或类似库，它会移除 300ms 延迟，但也可能干扰原生 tap 行为，此时高亮可能消失或错位 —— 不是 CSS 生效了，是事件机制变了
- Vue/React 项目中，动态添加的元素（比如 v-if 或 useState 切换出来的按钮）如果没继承父级的
-webkit-tap-highlight-color，高亮会重新出现
复杂点在于：它既不是 bug 也不是标准缺失，而是平台特性；关得过狠（比如全页面透明）可能降低可访问性，尤其对依赖视觉反馈的用户。
