-webkit-tap-highlight-color: transparent 仅对可点击且可聚焦的元素自身生效，不继承、不全局作用；需显式写在目标节点（如 button、[role="button"]）上，并确保 viewport 正确、语义完整，Android Chrome 62+ 已不支持。
为什么写了 -webkit-tap-highlight-color: transparent 还有蓝框
不是代码写错了，是它根本没作用到目标元素上。这个属性不继承、不全局生效，只对「当前元素自身」起效，且仅限于被浏览器识别为“可点击”的节点。常见失效场景包括：
-
body或*上写了该样式，但子元素（比如一个带onclick的<div>）不会自动获得 - 值用了
none、unset或rgba(255,255,255,0)—— 只有transparent和rgba(0,0,0,0)被 WebKit 内核识别 - 元素本身没语义或可访问性支持：纯
<div onclick="..."></div>在 iOS Safari 中可能压根不触发 tap 高亮，也就谈不上“关闭”；得加role="button"和tabindex="0" - 用了 Vue/React 动态渲染（如
v-if或useState切换），新插入的按钮没命中已有 CSS 选择器
哪些元素必须单独加 -webkit-tap-highlight-color: transparent
不能靠父容器兜底，必须显式写在实际响应点击的节点上。重点关注以下几类：
- 语义化可点击元素：
a、button、input[type="button"]、textarea、select - 带事件监听的容器：
[onclick]、[ontouchstart]、或明确加了role="button"+tabindex="0"的div/span - 第三方 UI 组件中的交互区域（如 Vant 的
van-button、WeUI 的weui-btn），需检查是否被库内样式覆盖，必要时用!important或提升选择器权重
推荐写法示例：
button,
a,
input[type="button"],
input[type="submit"],
[role="button"][tabindex="0"],
.js-clickable {
-webkit-tap-highlight-color: transparent;
}
Android Chrome 和微信 X5 内核的兼容性陷阱
别默认它在所有手机上都管用。关键事实：
立即学习“前端免费学习笔记（深入）”；
- Android Chrome 62+ 已彻底移除对
-webkit-tap-highlight-color的支持，写了等于白写 - 微信内置浏览器（X5 内核）要求页面必须有完整
<meta name="viewport">，且部分版本还依赖user-scalable=no才启用该样式 - iOS Safari 认这个属性，但只对「可聚焦可激活」元素生效；如果一个
<div>没tabindex，Safari 可能连高亮都不显示，你关了个寂寞 - 某些旧版 UC、QQ 浏览器支持不全，设了
transparent仍残留微弱灰边，此时需配合outline: none和border: none一并清理
真机测试前最容易漏掉的三件事
桌面 Chrome 的设备模拟器默认不触发 tap 高亮，开发时完全看不到问题。
- 必须在真实 iOS 设备（Safari）和 Android 设备（Chrome for Android）上分别验证，不能只测一个
- 动态插入的节点（如弹窗按钮、懒加载菜单项）要单独确认是否匹配到规则，
<style scoped>或 CSS-in-JS 容易漏掉 - 禁用高亮后，务必提供替代反馈：比如用
:active { opacity: 0.7; }或transform: scale(0.95);，否则用户点下去毫无响应感
真正难的不是写这行 CSS，而是它只在特定内核、特定语义、特定 viewport 条件下才起效，且关得太狠会影响键盘用户的焦点可见性。
