在手机端点击链接时会发现有一个背景色，有时候需要改变这个颜色，或者去除这个颜色，有时候a标签做成按钮时这个颜色的存在会很丑，像这样：
可以通过
-webkit-tap-highlight-color: rgba(0,0,0,0);
来去除这个高亮，这样在移动端点击按钮时就不会再有这个问题了
You are here
移动端下，点击a标签背景高亮问题的解决方法 蓝色背景色 有大用
星期四, 2020-04-16 07:30 — adminshiping1
在制作某个移动端项目的时候，发现当我们点击链接，input标签或者div盒子的时候，整个标签会出现颜色块并会闪烁一下，不仅影响美观，而且会极大降低了用户体验。
解决方案：-webkit-tap-highlight-color: transparent;//透明
调试：-webkit-tap-highlight-color:red; //加上这行代码，背景就会变成红色。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
a{
width: 100px;
height: 100px;
display: block;
border: 1px solid #ccc;
-webkit-tap-highlight-color: transparent;
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
cursor: pointer;
}
</style>
</head>
<body>
<a href="#"></a>
<input type="text">
<div></div>
</body>
</html>
是不是还要加上 下面的代码呢?
/* for IE */
a,area { blr:expression(this.onFocus=this.blur()); }
/* for Firefox */
a:focus { outline: none; }
a{
-webkit-tap-highlight-color: transparent;
}
来自 https://www.cnblogs.com/leaderspider/p/7242433.html
来自 https://blog.csdn.net/weixin_30383279/article/details/95208982
彼岸花开开彼岸， 奈何桥前可奈何。 望乡台下忘川水， 三生石边卖孟婆。 涅槃同魔魔恋相， 浮生若梦梦蹉跎。 唯有余生舞日月， 白驹过隙大风歌。
来自 https://www.cnblogs.com/maderlzp/p/7607121.html
手机端a标签点击出现背景的解决方法
如上图所示，手机/移动端点击 a 链接会有一个背景，尝试设置 background: none 无效。
解决方法：
给元素设置一个 -webkit-tap-highlight-color 就可以了：
如果无效，多设置几个：
-webkit-tap-highlight-color：
这是一个鲜为人知的属性，只用于iOS (iPhone和iPad)。
当你点击一个链接或者通过 Javascript 定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置 -webkit-tap-highlight-color 为任何颜色。
想要禁用这个高亮，设置颜色的 alpha 值为 0 即可。
示例：设置高亮色为 50% 透明的红色:
浏览器支持: 只有iOS(iPhone和iPad)。
来自 https://www.w3h5.com/post/354.html
普通分类: