css删除手机版mobile点击链接或按钮出现的背景颜色

时间:2017-10-20
今天在mobile手机端浏览网页时,发现a标签或按钮会自动补充出现边框或者背景,使得用户知道元素的点击状态,但这严重影响到页面的美观,有什么办法可以去掉这个灰色背景颜色吗?

在iphone下测试发现按下a链接背景会变灰一下(尤其给a取消跳转事件时很明显),就是手指点击后没跳转之前链接上有个背景。 用css方式如何去掉啊。

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>css删除手机版mobile点击链接或按钮出现的背景颜色</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
  </head>
  <body>
    <a href="https://www.manongjc.com/">在mobile下测试链接背景</a>
  </body>
</html>

我们只需要加入以下css即可修复这个bug:

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

-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).