使用Cursor：Pointer触摸/按下对象时禁用蓝色突出显示

每当在Chrome中触摸应用了cursor：pointer属性的Div时，就会出现一个蓝色突出显示。我们如何摆脱它？

我尝试了以下方法：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

但是它们不会影响按光标时的蓝色突出显示。

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

解决该问题，因为它将高光颜色设置为透明。

资料来源：http : //samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/

据我所知，Vlad K的答案可能会在某些android设备中引起问题。更好的解决方案：

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

只需将其添加到样式表中，然后将class="no_highlights"属性添加到要应用此类的元素即可。

no_highlights{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

或者您可以通过删除类名并执行此操作来全局地对所有元素执行此操作。

button,
textarea,
input,
select,
a{
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;

}

谢谢:)但无论如何。有蓝色边框作为辅助功能。它看起来很糟，但是，它可以帮助最需要它的人。

根据文档，您可以简单地执行以下操作：

-webkit-tap-highlight-color: transparent; /* for removing the highlight */

它适用于Android上的Chrome 68和Windows上的Chrome 80。