触摸/按光标对象时指示禁用蓝色高光:指针

Question

只要在Chrome中触摸了应用了光标:指针属性的Div,就会出现蓝色突出显示.我们怎样才能摆脱它呢？

我尝试过以下方法:

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

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

Answer 1

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

解决问题,因为它将高光颜色设置为透明.

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

Answer 2

据我所知,Vlad K的答案可能会导致某些Android设备出现问题.更好的解决方案:

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

Answer 3

只需将此添加到您的样式表中，然后将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;

}

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

Answer 4

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

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

它适用于 Android 版 Chrome 68 和 Windows 版 Chrome 80。

Answer 5

添加到CSS

CSS

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

顺风

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
  }
}