在移动 Safari 中点击链接时移除灰色高亮

-webkit-tap-highlight-color: rgba(0,0,0,0);

然后，在 Mobile Safari 中的页面 CSS 中允许 :active 样式生效

document.addEventListener("touchstart", function(){}, true);

Ryan McLaughlin

# 2012年3月21日

可能并非每个人都清楚，但这对于 Android 默认浏览器也有效，因为它们也是基于 Webkit 的。

Yop

# 2012年8月23日

在 object 标签上效果很好，谢谢！

Mudaser

# 2012年12月13日

太棒了！非常感谢！

bilelz

# 2013年1月10日

效果很好
谢谢

chandra

# 2014年1月30日

我仍然在 HTC 手机上看到绿色边框，而在其他 Android 手机上高亮颜色没有出现。

Damian

评论永久链接# 2014年3月26日

@chandra 你应该可以在你的 CSS 中设置 outline: none 来解决这个问题。但是，这可能会导致可访问性问题，所以请确保你在移除 outline 的元素上设置单独的 :hover、:focus 和 :active 样式。

yoshi

# 2014年10月7日

声明 document.addEventListener(“touchstart”, function(){}, true); 或其等价物在 iOS 上 iframe 内查看时会产生一个罕见的错误。在该文本区域中写入文本，然后将光标移动到文本中的另一个位置（例如，当想要更正文本时）会阻止写入的可能性。

为了解决这个问题，我仅在必要的标签上添加 ontouchstart=””，而不是在标签上。

Craig Dennis

# 2014年10月14日

你还应该记住，按钮和表单控件也需要添加相同的规则，因为它们也会有高亮。

// Remove tap highlight on iOS
input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Nidhi Arya

评论永久链接# 2014年11月6日

完美：)，工作正常……

Maarten

# 2015年4月7日

也不要忘记为复选框添加标签 :)

// Remove tap highlight on iOS
input,
textarea,
button,
select,
label,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

David F. Choy

# 2016年2月1日

仅供参考：我在 iPad Air 2 上运行的 Safari 上不需要添加事件监听器，iOS 版本 9.2.1。

MD.Riyaz

# 2016年9月24日

谢谢，它起作用了。

Rui Nunes

# 2016年11月30日

只需使用“transparent”作为颜色

tap-highlight-color: transparent;

评论

发表评论 取消回复

发表评论取消回复