必须用语义化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="#">—— 必须有href，空href=""或缺失都不行 -
<button>—— 任意<button>都自动生效，无需额外属性 -
<input type="button">/<input type="submit">—— 类型必须准确，type="text"不行 -
<div role="button">——role="button"是关键，仅tabindex="0"不够（旧 iOS 会忽略） -
<span tabindex="0" role="button">—— 双保险写法，兼容 iOS 12–16
为什么加了 onclick 还是没高亮、关不掉
因为 onclick 是 JS 行为，不是 HTML 语义。Safari 在渲染阶段就决定了“这个元素要不要画高亮”，它不等 JS 绑定完成才判断：
- 动态插入的
<div onclick="do()">没配role或tabindex→ 渲染时被当普通容器，高亮不触发，CSS 也无效 - Vue/React 中用
v-if或useState切换按钮 → 新节点若没同步role="button"，高亮立刻复现 - 写了
<div onclick="...">但没加cursor: pointer→ Safari 可能跳过 :active 检测，导致你误以为“样式没起作用”
移动端必须加的两个配套 CSS 声明
光写 -webkit-tap-highlight-color: transparent 在真机上大概率残留灰白残影，尤其 iOS 15.4+：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须同时加
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 实测，别信模拟器。
