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

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