手机端a标签点击出现背景的解决方法

​

如上图所示，手机/移动端点击 a 链接会有一个背景，尝试设置 background: none 无效。

解决方法：

给元素设置一个 -webkit-tap-highlight-color 就可以了：

a:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*解决手机版点击背景问题*/
}

如果无效，多设置几个：

a, a:hover, a:visited, a:link, a:active , a:focus {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*解决手机版点击背景问题*/
}

-webkit-tap-highlight-color：

这是一个鲜为人知的属性，只用于iOS (iPhone和iPad)。

当你点击一个链接或者通过 Javascript 定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置 -webkit-tap-highlight-color 为任何颜色。

想要禁用这个高亮，设置颜色的 alpha 值为 0 即可。

示例：设置高亮色为 50% 透明的红色:

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

浏览器支持: 只有iOS(iPhone和iPad)。

声明：本文由w3h5原创，转载请注明出处：《手机端a标签点击出现背景的解决方法》 https://cloud.tencent.com/developer/article/1537962

     (adsbygoogle = window.adsbygoogle || []).push({});