ios safari点击盒子出现蓝色高亮是tap-highlight-color默认反馈；禁用需在可点击元素上设-webkit-tap-highlight-color: transparent，且不能用rgba或none，注意触发条件与样式覆盖问题。
Mobile端点击盒子出现蓝色高亮是什么问题
这是 iOS Safari（及部分 Android WebView）默认行为：用户点击任何可交互元素时，会短暂显示一个半透明蓝色遮罩（tap-highlight-color），用于视觉反馈。它和 :active 伪类无关，也不受 outline 控制，是独立的底层渲染层效果。
如何用 CSS 彻底禁用 tap-highlight-color
直接设置 -webkit-tap-highlight-color 为透明即可，但要注意几个关键点：
- 必须写在可点击的元素上（如
<div>、<code><span></span>、<a></a>），父容器设了不生效 - 值必须是
transparent，不能用rgba(0,0,0,0)或none（后者无效） - 需要加
-webkit-前缀，目前仍无标准属性名，tap-highlight-color本身不被识别 - 如果元素有
cursor: pointer或绑了onclick，更需显式关闭，否则某些 iOS 版本仍可能触发
示例：
.clickable-box {
-webkit-tap-highlight-color: transparent;
}
为什么有时设了 transparent 还有高亮
常见原因不是 CSS 写错，而是触发条件没满足：
- 元素没有明确的交互暗示：iOS 对纯
<div> 默认不启用高亮，但一旦加了 <code>onclick、ontouchstart或role="button"，就激活该行为，此时必须设-webkit-tap-highlight-color - CSS 被覆盖：检查是否被更高优先级规则（如内联样式、!important 冲突）重置
- 元素不可点击：确保没有
pointer-events: none，否则 Safari 可能忽略该样式声明 - 使用了 FastClick 等库：旧版 FastClick 会主动移除该样式，需确认是否与你的 CSS 冲突
- 部分原生表单控件（如
<select></select>、<input type="checkbox">）依赖该反馈，去掉后用户无法感知点击是否成功 - 某些 Android WebView 对
transparent支持不稳定，全局设可能导致意外空白反馈 - 真正需要禁用的只是自定义点击区域（如手写的
div按钮），精准控制更安全
要不要全局重置 tap-highlight-color
不建议在 * {} 或 body 上统一设，因为：
复杂点在于：这个样式只在真机或模拟器上可见，开发时用 Chrome DevTools 的 device mode 看不到——得真机调试才能验证是否生效。
