如何移除Chrome移动端模式下链接点击时的蓝色背景

这个问题我之前也碰到过！你看到的那个蓝色背景根本不是outline，而是Chrome移动端自带的点击高亮反馈效果，专门由WebKit的私有属性控制，所以只设置outline: none肯定没用哒。

具体解决方案 #

直接给导航里的链接加上这个属性，把点击高亮设为透明（或者你想要的自定义颜色）就行：

.main-navigation a {
  /* 移除Chrome移动端的点击蓝色高亮 */
  -webkit-tap-highlight-color: transparent;
  /* 兼容其他WebKit内核移动端浏览器 */
  tap-highlight-color: transparent;
}

要是你还想保留原来的:hover/focus/active样式，把这段代码和你现有的CSS结合起来就好：

.main-navigation a {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

.main-navigation a:hover, 
.main-navigation a:focus, 
.main-navigation a:active { 
  color: #e6ebf6; 
  outline: none; 
}

小补充 #

• 你也可以把transparent换成和页面背景一致的颜色值，效果是一样的；
• 这个属性是WebKit私有属性，主要覆盖Chrome、Safari这类移动端浏览器，主流场景下完全够用。

内容的提问来源于stack exchange，提问作者Navid Pourghanbari