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

81

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.

html css mobile touch highlight Ulad Kasach
quelle

Antworten:

85

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;
Erweitern Sie das Snippet

Oboo Cheng
quelle
Bitte klären Sie, welche Antwort alternativ zu "Antwort oben"
Nima Derakhshanjan
1
Warum haben Sie rgba(0,0,0,0)stattrgba(255,255,255,0)
Gaurav Aggarwal
1
@GauravAggarwal Der Alpha- Raum ist sinnvoll, daher gibt es keinen Unterschied zwischen rgba (0,0,0,0) und rgba (255,255,255,0). Dies ist nur ein Fall, denke ich. Verhält sich rgba (255,255,255,0) seltsam?
Oboo Cheng
4
Wenn Sie es trotzdem mit transparent überschreiben wollen, warum sollten Sie überhaupt eine rgba-Erklärung haben? Gibt es WebKit-Versionen, die das transparente Schlüsselwort für diese Eigenschaft irgendwie nicht unterstützen?
BoltClock
4
@BoltClock .Ich kann wirklich nicht finden ‚transparent‘ Schlüsselwort in MDN doc , so dass ich denke , es ist nicht standard.Before ich diese Frage beantworten Ich habe diesen Artikel , ** Christian Koch ** s Kommentar Rat dies hinzuzufügen , weil er Cames Ich denke, es ist ein Fehler eines bestimmten Geräts.
Oboo Cheng
9

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.

Asith
quelle
0

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.

Eric Mutta
quelle
Warum das Downvote? Ein Kommentar zur akzeptierten Antwort wurde am 20. Mai 2020 abgegeben. Meine Antwort wurde früher am 5. April 2020 gegeben. Sie sagen genau das Gleiche, aber dies wird herabgestimmt und der Kommentar wird hochgestimmt. Was gibt?
Eric Mutta