必须用语义化html或role/tabindex声明使元素被识别为可交互，再配合-webkit-tap-highlight-color和user-select:none才能关闭ios高亮；android chrome已废弃该属性。

不能靠 HTML 原生属性单独控制点击高亮，必须配合 CSS 和语义化标记才能生效。 iOS Safari 和微信 X5 等 WebView 完全不响应 onclick、ontouchstart 这类事件属性来触发或关闭高亮；它们只认元素是否“被浏览器判定为可交互”，而这个判定依赖 HTML 语义或显式可聚焦声明。

哪些 HTML 属性能让 Safari 认出这是个可点按钮

只有带明确交互意图的 HTML 元素，才会被 Safari 主动应用 -webkit-tap-highlight-color，也才允许你用 CSS 关掉它：

• <a href="#"></a> —— 必须有 href，空 href="" 或缺失都不行
• <button></button> —— 任意 <button></button> 都自动生效，无需额外属性
• <input type="button"> / <input type="submit"> —— 类型必须准确，type="text" 不行
• <div role="button"> —— <code>role="button" 是关键，仅 tabindex="0" 不够（旧 iOS 会忽略）
• <span tabindex="0" role="button"></span> —— 双保险写法，兼容 iOS 12–16

为什么加了 onclick 还是没高亮、关不掉

因为 onclick 是 JS 行为，不是 HTML 语义。Safari 在渲染阶段就决定了“这个元素要不要画高亮”，它不等 JS 绑定完成才判断：


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
• 动态插入的 <div onclick="do()"> 没配 <code>role 或 tabindex → 渲染时被当普通容器，高亮不触发，CSS 也无效
• Vue/React 中用 v-if 或 useState 切换按钮 → 新节点若没同步 role="button"，高亮立刻复现
• 写了 <div onclick="..."> 但没加 <code>cursor: pointer → Safari 可能跳过 :active 检测，导致你误以为“样式没起作用”

  移动端必须加的两个配套 CSS 声明

  光写 -webkit-tap-highlight-color: transparent 在真机上大概率残留灰白残影，尤其 iOS 15.4+：

  • 必须同时加 user-select: none —— 否则文本重绘会闪一下，看起来像高亮没关干净
  • 选择器必须精确匹配目标元素，不能只写 body { -webkit-tap-highlight-color: transparent } —— 这个属性不继承
  • 推荐写法：

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

  Android Chrome 已经不认这个了，别白忙

  Chrome 62+ 彻底移除了对 -webkit-tap-highlight-color 的支持，无论你写什么值都无效。这不是 bug，是主动废弃：

  • 在 Android Chrome 真机上看到高亮 → 不是你的 CSS 写错了，是它本来就不处理这个属性
  • 想统一反馈？别依赖系统高亮，改用 :active + transform: scale(0.98) + transition 做轻量压感
  • 注意：iOS 上 :active 延迟明显，必须加 touch-action: manipulation 才能接近即时响应

  最容易被忽略的是：桌面 Chrome 的设备模拟器根本不会触发 tap 高亮，开发阶段一切正常，一上 iOS 真机就满屏蓝灰块——所以每次改完必须拿 iPhone 实测，别信模拟器。