蓝色/灰白闪烁框是 WebKit 内核的独立 overlay，非 outline 或 :active 触发；须对可激活元素显式设置 -webkit-tap-highlight-color: transparent 并补 user-select: none 消除 iOS 15.4+ 残影。

为什么 outline: none 和 :active 都没用

那个蓝色/灰白闪烁框不是 outline，也不是 :active 伪类触发的样式，而是 WebKit 内核（iOS Safari、微信 X5 等）在 touchstart 瞬间绘制的一层独立 overlay。它不走 CSS 渲染流程，不受 border、box-shadow、opacity 影响，也不继承、不响应伪类选择器。

常见误操作包括：

• a:active { -webkit-tap-highlight-color: transparent; } —— 伪类里写无效
• * { -webkit-tap-highlight-color: transparent; } —— 全局写法在部分微信 X5 内核会白屏
• 只加 onclick 的
  却没设 role="button" 和 tabindex="0" —— 浏览器根本不把它当可激活元素，属性压根不生效

  必须显式作用于可激活元素的 -webkit-tap-highlight-color

  这个属性只对浏览器识别为“可点击且可聚焦”的元素起效，且必须直接写在目标元素上。推荐选择器组合：

  • a、button
  • input[type="button"]、input[type="submit"]
  • [role="button"][tabindex="0"]（自定义按钮必备）
  • 动态渲染场景下，[onclick] 可作为兜底，但不如语义化写法稳定

  值只能是 transparent 或 rgba(0,0,0,0)；写成 none、unset、rgba(255,255,255,0) 全部无效。

  示例写法：

  a, button, input[type="button"], input[type="submit"], [role="button"][tabindex="0"] {
    -webkit-tap-highlight-color: transparent;
  }

  iOS 15.4+ 残留灰白闪烁？补上 user-select: none

  即使 -webkit-tap-highlight-color: transparent 已生效，iOS 15.4+ 仍可能因默认文本可选行为触发重绘干扰，出现微弱灰白残影。这不是样式失效，而是系统级行为冲突。

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载

  解决方案是叠加 user-select: none：

  • 对纯操作按钮（如图标按钮、切换开关），直接加 user-select: none
  • 若按钮内含需复制的内容（如电话号码、地址），不能整块禁用，应把可选文本用 包裹，并单独设 .selectable { user-select: text; }

  注意：某些 Hybrid App 的老旧 WebView 中，还需同步清理 outline: none 和 border: none 才能彻底干净。

  关掉高亮后用户点下去像没反应，怎么办

  -webkit-tap-highlight-color 是系统级瞬时反馈，关掉后不会自动给你补交互感。:active 在 iOS 上持续时间仅 100–200ms，且有明显延迟，肉眼几乎不可见，不能当替代方案。

  必须主动添加视觉反馈：

  • 缩放反馈：:active { transform: scale(0.98); }
  • 背景色变化：:active { background-color: #e9ecef; }
  • 如果是
    模拟按钮，除了样式，还得确保有 cursor: pointer 和 role="button"，否则屏幕阅读器可能跳过
  • Vue/React 动态插入节点时，要确认新 DOM 同步携带 role 和 tabindex，否则高亮会重新出现

  真机测试比模拟器重要得多——Android Chrome 62+ 已彻底忽略该属性，写了也白看；桌面 Chrome 的设备模拟器默认不触发 tap 行为，开发阶段完全看不到问题。