应使用 -webkit-tap-highlight-color: transparent 彻底禁用 ios 和部分 android 浏览器点击按钮时的蓝色/灰色遮罩，该属性仅对可激活元素生效，需确保选择器命中正确元素并避免被高优先级规则覆盖。
移动端点击按钮后出现蓝色/灰色遮罩怎么办
这是 iOS 和部分 Android 浏览器的默认行为，本质是 :active 状态下由 WebKit 内核自动添加的 -webkit-tap-highlight-color 遮罩，不是 bug，但会盖住你写的 :active 样式，尤其在自定义按钮或 WebApp 中破坏 UI 一致性。
-webkit-tap-highlight-color: transparent 为什么写了还是有高亮
大概率不是没生效，而是被覆盖或命中错误元素：
- 检查是否用了
rgba(0,0,0,0)或none—— 这两个值在 iOS 7–9 等旧系统里无效，必须用transparent - 确认选择器真正作用在“响应触摸”的元素上：比如按钮内部套了
<span></span>，而高亮出现在<span></span>上，就得给它也加该样式 - 某些 UI 库（如 Vant、Ionic）自带
-webkit-tap-highlight-color: rgba(0,0,0,0.1)，需用更具体的选择器覆盖，例如button.my-btn { -webkit-tap-highlight-color: transparent; } - Sass/Less 编译时可能误删了
-webkit-前缀，务必保留原生前缀
禁用高亮后用户点不动了？补个轻量反馈
系统高亮一去，视觉反馈就没了。别只靠 :active 改背景色——深色背景或渐变按钮上容易突兀，且 iOS Safari 对 :active 触发不及时，过渡常失效。
- 推荐用
opacity: 0.7或transform: scale(0.98)，副作用小、兼容性稳 - 必须搭配
-webkit-tap-highlight-color: transparent使用，否则高亮会盖掉你的:active效果 - 如果按钮是用
div+role="button"模拟的，得加tabindex="0"，否则-webkit-tap-highlight-color不生效
桌面端调试时看不到效果？
-webkit-tap-highlight-color 只在真实触摸设备或开发者工具开启“Touch emulation”模式下触发。Chrome DevTools → ⚙️ → Rendering → 勾选 Emulate touch events 才能预览；单纯鼠标点击不会触发。
真机测试前记得清缓存，旧版 iOS（如 iOS 12 之前）对 transparent 支持不稳定，必要时可加兜底：-webkit-tap-highlight-color: rgba(0,0,0,0);，但优先用 transparent。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
