删除在 ios safari / chrome / firefox 中单击的链接上的灰色背景答案

【问题标题】：remove grey background on link clicked in ios safari / chrome / firefox删除在 ios safari / chrome / firefox 中单击的链接上的灰色背景
【发布时间】：2012-08-06 18:45:29
【问题描述】：

当您在 iOS 的 Safari（或 chrome 或 firefox）中单击（触摸）链接时，链接后面会出现灰色背景（仅当您按住它时）。有没有办法使用 CSS 删除此功能？

请看下面的示例图片：

【问题讨论】：

我对 safari iOS 并没有真正的了解，但是当您谈论链接和 css 时，我想您最好在 a:active 中更改背景颜色

标签： ios css mobile-safari mobile-chrome

【解决方案1】：

Webkit 有一个特定的样式属性：-webkit-tap-highlight-color。

复制自：http://davidwalsh.name/mobile-highlight-color—

/* light blue at 80% opacity */
html {
    -webkit-tap-highlight-color: rgba(201, 224, 253, 0.8);
}

/* change it for a div that has a similar background-color to the light blue tap color */
.blueDiv {
    -webkit-tap-highlight-color: rgba(251, 185, 250, 0.9);
}

如果你想完全移除高亮——

.myButton {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

【讨论】：

太棒了，修复了我的 iOS 点击背景问题
这样一个方便的小声明。谢谢@pk-nb

【解决方案2】：

最新版本的 iOS 出于某种原因忽略了 RGBA 颜色。

要删除它，我最终不得不使用以下内容：

-webkit-tap-highlight-color: transparent;

如此处所述： https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

【讨论】：