Deaktivieren Sie die blaue Markierung, wenn Sie ein Objekt mit dem Cursor berühren / drücken: Zeiger

Es wird eine blaue Markierung angezeigt, wenn ein Div mit der Eigenschaft cursor: pointer in Chrome berührt wird. Wie können wir es loswerden?

Ich habe folgendes versucht:

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

Sie wirken sich jedoch nicht auf die blaue Hervorhebung beim Drücken eines Cursors aus.

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

Behebt das Problem, da die Hervorhebungsfarbe transparent wird.

Quelle: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/

Soweit ich weiß, könnte die Antwort von Vlad K bei einigen Android-Geräten zu Problemen führen. Bessere Lösung:

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

Fügen Sie dies einfach Ihrem Stylesheet hinzu und fügen Sie das class="no_highlights"Attribut einfach dem Element hinzu , auf das Sie diese Klasse anwenden möchten.

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;
}

oder Sie können dies global für alle Elemente tun, indem Sie den Klassennamen entfernen und dies tun.

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;

}

Danke :) aber trotzdem. Der blaue Rand dient als Barrierefreiheit. Es sieht schlecht aus, aber es hilft jemandem, der es am meisten brauchte.

Laut den Dokumenten können Sie dies einfach tun:

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

Es funktioniert für mich unter Chrome 68 für Android und Chrome 80 unter Windows.