Wie auch immer, um das blaue Hervorheben von Elementen in Chrome zu verhindern, wenn Sie schnell klicken?

123

Die meiste Zeit mache ich mir darüber keine Sorgen, aber ich habe ein Bildkarussell. Wenn ich schnell auf die nächsten und vorherigen Divs klicke, werden sie in Chrome hervorgehoben.

Ich habe versucht, Gliederung zu verwenden: keine, aber keine Wirkung. Gibt es da draußen irgendwelche Lösungen?

css google-chrome Schmied
quelle
Ich sehe diesen Effekt nicht auf der aktuellen Chrome-Version
Billal Begueradj
Ich weiß, dass Ihr Anwendungsfall anders ist, aber für alle anderen, die ihn möglicherweise von allen Links entfernen möchten, empfehle ich dies nicht. Ich habe versucht, es auf einer PWA zu entfernen, aber ohne das visuelle Feedback ist die Wahrnehmung des Benutzers, dass die App langsamer ist.
Collimarco

Antworten:

168

Zusätzlich zu dem von Floremin bereitgestellten Link , der die Textauswahl mithilfe von JavaScript löscht, um die Auswahl zu "löschen", können Sie dazu auch reines CSS verwenden. Das CSS ist da ...

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Fügen Sie einfach das class="noSelect"Attribut zu dem Element hinzu , auf das Sie diese Klasse anwenden möchten. Ich würde wärmstens empfehlen, diese CSS-Lösung auszuprobieren. An der Verwendung von JavaScript ist nichts auszusetzen. Ich glaube nur, dass dies möglicherweise einfacher sein könnte, und bereinige die Dinge in Ihrem Code ein wenig.

Für Chrome auf Android -webkit-tap-highlight-color: transparent; ist eine zusätzliche Regel, mit der Sie experimentieren möchten, um Unterstützung für Android zu erhalten.

smts
quelle
1
Nur für Chrome benötigen Sie wahrscheinlich nur user-selectund webkit-user-select.
smts
Dies ist die Lösung, mit der ich mich befasse, da ich nur das Problem mit der Hervorhebung in Chrome habe und es hervorragend funktioniert. Vielen Dank an alle, die teilgenommen haben!
Smith
36
Mit Chrome unter Android konnte es nicht funktionieren. Ich musste verwenden-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
Iwazaru
25
-webkit-tap-highlight-color: transparent; ist der Schlüsselteil auf Chrome
FisNaN
Für Chrom auf Android-Webkit-Tap-Highlight-Farbe: transparent; - Arbeitete für mich danke!
CK Munn
213

Für Chrome unter Android können Sie die CSS-Eigenschaft -webkit-tippen-hervorheben-Farbe verwenden :

-webkit-tippen-hervorheben-Farbe ist eine nicht standardmäßige CSS-Eigenschaft, die die Farbe der Hervorhebung festlegt, die über einem Link angezeigt wird, während dieser getippt wird. Die Hervorhebung zeigt dem Benutzer an, dass sein Tippen erfolgreich erkannt wurde, und zeigt an, auf welches Element er tippt.

Um die Hervorhebung vollständig zu entfernen, können Sie den Wert auf Folgendes einstellen transparent:

-webkit-tap-highlight-color: transparent;

Beachten Sie, dass dies Auswirkungen auf die Barrierefreiheit haben kann: siehe Outlininenone.com

Iwazaru
quelle
4
Ich habe festgestellt, dass sich Chrome beim Ausführen auf einem Touchscreen ähnlich verhält wie auf Android. Ich hatte ein <div>, das blau blinkt, wenn Sie irgendwo darauf klicken. Erst als ich diese Antwort benutzte, hörte sie auf. Vielen Dank!
Valorum
2
Keiner der anderen CSS-Anwälte wird dies tun. Dies ist so wichtig, da die Hervorhebung durch Tippen das Erscheinungsbild des angeklickten Objekts verzerrt und Ihre visuelle Sprache verwischt.
Dominic Cerisano
23
-webkit-tap-highlight-color: transparent;scheint auch zu funktionieren.
Bernard
1
Mir hat das gefallen, für Touch-Events ist es ein Muss! Diese Informationen sind "außerhalb des Diagramms" nützlich!
Berker Yüceer
1
Dies ist die Lösung, die 2020 für mich funktioniert hat
Blue Bot
66

Ich verwende Chrome Version 60 und keine der vorherigen CSS-Antworten hat funktioniert.

Ich fand, dass Chrome das blaue Highlight über den outlineStil hinzufügte . Das Hinzufügen des folgenden CSS hat das Problem für mich behoben:

:focus {
    outline: none !important;
}
Jeff L.
quelle
5
Sie, Sir, sind ein Lebensretter.
Beckah
2
Dies ist die funktionierende für Chrome (Version 61) auf Android
Stefan
Funktioniert für neuere Versionen von Chrome. Vielen Dank!
CrazedCoder
Super, habe mich gefragt, warum mein Vertrauter user-select:nonenirgendwo hinkommt
Sean T
Ich habe alles versucht, aber das hat wie Charme funktioniert. Danke, dass du meine Haare gerettet hast!
Avinash Kumar
25

Aber manchmal kann sogar bei user-selectund touch-calloutausgeschaltet cursor: pointer;dieser Effekt auftreten. Setzen cursor: default;Sie ihn einfach ein und es wird funktionieren.

Gustavo B.
quelle
7
Dies ist eine richtige Antwort, cursor: pointer;verursacht wirklich Highlight. Ist -webkit-tap-highlight-color: transparent;aber universeller Lösung.
Yanot
1
@yanot: Lesen Sie die Warnung über, -webkit-tap-highlight-colorbevor Sie sie als relativ universelle Lösung bezeichnen : developer.mozilla.org/en-US/docs/Web/CSS/…
Hassan Baig
@ HassanBaig Ich denke, es ist offensichtlich, dass ich nicht universelle Cross-Browser gemeint habe , aber in diesem Zusammenhang, dh über verschiedene Versionen von Chrome
Yanot
2
danke - keine der anderen Lösungen hat bei mir funktioniert. Musste den Cursorzeiger entfernen, damit die blaue
Markierung
3
cursor: defaulthat den Trick für mich gemacht, als nichts anderes funktioniert hat.
Telarian
-2

Versuchen Sie, einen Handler für das Auswahlereignis für diese Elemente zu erstellen, und im Handler können Sie die Auswahl löschen.

Schau dir das an:

Klartextauswahl mit JavaScript

Dies ist ein Beispiel für das Löschen der Auswahl. Sie müssen es nur so ändern, dass es nur für das spezifische Element funktioniert, das Sie benötigen.

Floremin
quelle
Es kann also nicht durch CSS behoben werden, oder? Könnte ich einfach den ausgewählten Text in meinem Klick-Handler löschen? EDIT- Danke für das Beispiel. Das ist schade, dass es über Javascript gehandhabt werden muss. Ich hatte gehofft, dass es nur ein CSS-Problem war.
Smith
Wird dies auch Auswirkungen auf die Barrierefreiheit haben?
Smith
Sie können den Text im Klick-Handler löschen, aber sehen Sie sich die Antwort von @smts mit reinem CSS an.
Floremin
-8

Das funktioniert am besten für mich:

.noSelect:hover {
  background-color: white;
}
nagy.zsolt.hun
quelle
6
Dies ist schlecht und ein Weg in eine bestimmte zukünftige Hölle. Nichts für Ungut.
Mike Barwick
Was ist, wenn der Hintergrund der Website nicht weiß ist?
Rideon88
Dies ist nicht wartbar. Niemand tut das bitte.
Telarian