移动端点击高亮 (WebKit Tap Highlight)

-webkit-tap-highlight-color: transparent;

这里的 tap 指移动端的触摸点击；tab 通常指键盘上的 Tab 键。

它解决什么问题？

在手机浏览器、iOS Safari、Android Chrome 或 WebView 中，用户手指触摸链接、按钮或其他可交互元素时，浏览器可能会在元素上显示一层短暂的半透明高亮。某些环境下这层高亮看起来像蓝色蒙层：

手指按下元素
    -> 浏览器显示 tap highlight
    -> 手指抬起或交互结束
    -> 高亮消失

这不是元素自身的 background-color，通常也不是项目代码主动添加的伪元素。它是浏览器为触摸反馈提供的默认视觉效果。

如果设计已经提供了自己的按压态，浏览器默认高亮可能会造成：

• 按钮颜色突然被覆盖，看起来像出现蓝色蒙层；
• 圆角、阴影和透明背景被额外的矩形高亮干扰；
• 自定义的 :active 动画与浏览器高亮叠加；
• 在整块可点击区域上出现与品牌色不一致的反馈。

这时可以将 tap highlight 设置为透明：

.button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

transparent 的意思是“高亮层透明”，不是禁止点击，也不是禁止触摸事件。用户仍然可以正常点击、触摸、聚焦和触发事件。

为什么移动端需要单独处理？

桌面端和移动端常用的交互状态不同：

手机没有持续存在的鼠标指针，因此不能把桌面端的 :hover 当作移动端按压反馈。触摸设备可能模拟 :hover，也可能让 :hover 在点击后短暂保持；不同浏览器和设备的行为并不完全一致。

更稳妥的思路是：

1. 桌面端用 :hover 表示鼠标悬停；
2. 鼠标和触摸都可以用 :active 表示“正在按下”；
3. 键盘用户保留清晰的 :focus-visible 焦点样式；
4. 如果浏览器默认 tap highlight 与设计冲突，再将其设置为透明；
5. 透明后必须由应用自己的 :active、状态变化或动画提供触摸反馈。

推荐写法

一个更完整的按钮样式可以这样写：

.button {
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, transform 120ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: #e9eef8;
  }
}

.button:active {
  background-color: #dbe5f5;
  transform: scale(0.98);
}

.button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

这里的重点不是一定要使用某个颜色或缩放比例，而是将不同输入方式的反馈分开：

• @media (hover: hover) and (pointer: fine) 更适合只给真正拥有精确指针的设备添加悬停效果；
• :active 负责按下瞬间的反馈，移动端也能使用；
• :focus-visible 负责键盘导航反馈，不应被 outline: none 随意删除；
• -webkit-tap-highlight-color: transparent 只负责移除浏览器额外的触摸高亮。

如果希望所有链接和按钮都采用相同策略，可以使用：

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

是否应该写在 body 或 html 上？

有些项目会这样写：

html {
  -webkit-tap-highlight-color: transparent;
}

它可能通过继承影响页面中的大量元素，适合“整个应用都由自定义交互状态负责反馈”的场景。但对普通网站来说，建议优先限定在实际的可交互元素上：

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

局部设置的好处是不会意外改变文本、表单控件或第三方组件的默认触摸体验。这个属性具有继承特征时，也要注意父级的设置可能影响子元素；遇到样式不生效，应该检查祖先元素和最终计算样式。

transparent 不等于没有交互反馈

这是最重要的使用原则。下面的代码会消除浏览器高亮，但如果没有其他状态，用户按下后可能完全看不到任何反应：

button {
  -webkit-tap-highlight-color: transparent;
}

因此至少要保留一种反馈：

button {
  -webkit-tap-highlight-color: transparent;
}

button:active {
  opacity: 0.72;
}

更好的反馈通常是颜色、阴影、位移或按压态组合，而不是只依赖透明度。对于提交、删除、收藏等操作，还应在操作成功后显示持久的状态变化，例如按钮文案、图标或列表内容发生变化；短暂的 :active 只能说明“按下了”，不能说明“业务操作成功”。

常见混淆

它不是 :hover 的移动端版本

它是 WebKit 前缀属性，用于控制浏览器在触摸点击时绘制的高亮颜色；:hover 是 CSS 伪类，用于表示指针悬停。两者属于不同层次：一个是浏览器的触摸反馈绘制，一个是元素匹配的交互状态。

它不是 user-select: none

user-select: none;

控制的是文本能否被选择。它不能替代 tap highlight 设置，而且对正文、文章和输入区域使用不当会破坏复制、选择和辅助操作。

它不是 touch-action: none

touch-action: none;

控制浏览器是否处理滚动、缩放等触摸手势。它与高亮颜色没有直接关系，误用可能导致页面无法滚动或缩放。不要为了消除蓝色高亮而设置它。

它不是 outline: none

outline 主要涉及聚焦轮廓。移除 outline 可能伤害键盘导航和可访问性，也不能保证消除移动端 tap highlight。即使使用透明 tap highlight，也应保留 :focus-visible 的可见焦点样式。

什么时候不建议设置为透明？

以下情况要谨慎：

• 页面没有任何自定义 :active 或成功状态；
• 这是面向大量普通用户的网站，浏览器默认反馈本身有帮助；
• 第三方组件依靠系统高亮提示用户当前触摸目标；
• 目标用户包含低视力或认知障碍用户，需要更强的即时反馈；
• 只因为看到一次蓝色颜色就全局关闭，而没有确认它是否来自 tap highlight。

更合理的判断是：默认高亮是否与组件视觉系统冲突？项目是否已经实现了等价或更清晰的按压反馈？如果答案都是“是”，再设置透明。

调试清单

1. 先确认属性拼写是 -webkit-tap-highlight-color，不是 -webkit-tab-highlight-color。
2. 检查元素是否真的属于链接、按钮或其他可交互区域。
3. 在 DevTools 的 Computed 面板检查最终计算到的值，注意祖先元素的继承。
4. 暂时移除 background、伪元素和 box-shadow，确认蓝色是否来自项目自身样式。
5. 检查 :hover、:active、:focus 和 :focus-visible 是否有样式叠加。
6. 使用真实 iOS Safari、Android Chrome 或项目实际使用的 WebView 测试；桌面 DevTools 的设备模拟不能完全替代真机。
7. 确认透明化后仍然有按压、聚焦和操作完成反馈。

一句话记忆

-webkit-tap-highlight-color 控制移动端浏览器在触摸点击时附加的高亮颜色。设置为 transparent 可以去掉与设计冲突的默认蒙层，但必须用 :active、:focus-visible 和业务状态变化补回清晰的交互反馈。

参考资料

• MDN: -webkit-tap-highlight-color
• MDN: :hover
• MDN: :active
• MDN: :focus-visible

本文归档于个人知识库 · 领域：CS & AI · 模块：04 Project_CS_AI/Frontend