W każdym razie, aby zapobiec niebieskiemu podświetlaniu elementów w Chrome podczas szybkiego klikania?

123

Przez większość czasu się tym nie martwię, ale mam karuzelę obrazów i jeśli szybko kliknę na następny i poprzedni element div, zostaną one podświetlone w Chrome.

Próbowałem użyć konturu: brak, ale bez efektu. Czy są jakieś rozwiązania?

css google-chrome Kowal
źródło
Nie widzę tego efektu na aktualnej wersji Chrome
Billal Begueradj
Wiem, że Twój przypadek użycia jest inny, ale nie polecam tego robić każdemu, kto chciałby usunąć to ze wszystkich linków. Próbowałem usunąć to w PWA, ale bez wizualnej informacji zwrotnej użytkownik postrzega aplikację jako wolniejszą.
collimarco

Odpowiedzi:

170

Oprócz linku dostarczonego przez Floremin , który czyści zaznaczenie tekstu za pomocą JavaScript w celu „wyczyszczenia” zaznaczenia, możesz również użyć czystego CSS, aby to osiągnąć. CSS jest tutaj ...

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

Po prostu dodaj class="noSelect"atrybut do elementu, do którego chcesz zastosować tę klasę. Gorąco polecam wypróbowanie tego rozwiązania CSS. Nie ma nic złego w używaniu JavaScript, po prostu uważam, że może to być potencjalnie łatwiejsze i trochę uporządkować kod.

Chrome na Androida -webkit-tap-highlight-color: transparent; to dodatkowa reguła, z którą możesz poeksperymentować, aby uzyskać obsługę Androida.

smts
źródło
1
Tylko w przypadku przeglądarki Chrome prawdopodobnie potrzebujesz tylko user-selecti webkit-user-select.
smts
Jest to rozwiązanie, z którego korzystam, ponieważ mam tylko problem z podświetlaniem w Chrome i działa świetnie. Dziękujemy wszystkim, którzy wzięli udział!
Smith
36
Nie udało się go uruchomić z Chrome na Androida. Musiałem skorzystać-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
Iwazaru
25
-webkit-tap-highlight-color: transparent; jest kluczową częścią w Chrome
FisNaN
Chrom na Androidzie -webkit-tap-highlight-color: przezroczysty; - Pracował dla mnie dzięki!
CK Munn
213

W przypadku przeglądarki Chrome na Androida możesz użyć właściwości CSS -webkit-tap-highlight-color :

-webkit-tap-highlight-color to niestandardowa właściwość CSS, która ustawia kolor podświetlenia, które pojawia się nad łączem, gdy jest ono dotykane. Podświetlenie wskazuje użytkownikowi, że jego dotknięcie jest pomyślnie rozpoznawane, i wskazuje, którego elementu dotyka.

Aby całkowicie usunąć podświetlenie, możesz ustawić wartość na transparent:

-webkit-tap-highlight-color: transparent;

Pamiętaj, że może to mieć wpływ na dostępność: zobacz outlinenone.com

Iwazaru
źródło
4
Odkryłem, że na przykład po uruchomieniu na ekranie dotykowym Chrome będzie zachowywał się podobnie jak na Androidzie. Miałem <div>, który migałby na niebiesko po każdym kliknięciu w środku. Dopiero gdy użyłem tej odpowiedzi, to się skończyło. Dzięki!
Valorum
2
Żaden inny css attys tego nie zrobi. Jest to tak ważne, ponieważ podświetlenie stuknięcia zniekształca wygląd tego, co zostało kliknięte, zniekształcając język wizualny.
Dominic Cerisano
23
-webkit-tap-highlight-color: transparent;wydaje się też działać.
Bernard
1
Podobało mi się to, na imprezy dotykowe to konieczność! Ta informacja jest przydatna „poza wykresem”!
Berker Yüceer
1
To rozwiązanie, które zadziałało u mnie w 2020 roku
Blue Bot
66

Używam Chrome w wersji 60 i żadna z poprzednich odpowiedzi CSS nie działała.

Odkryłem, że Chrome dodaje niebieskie podświetlenie poprzez outlinestyl. Dodanie następującego CSS rozwiązało problem:

:focus {
    outline: none !important;
}
Jeff L.
źródło
5
ty, sir, ratujesz życie.
beckah
2
to działa dla Chrome (wersja 61) na Androida
Stefan
Działa w nowszych wersjach Chrome. Dzięki!
CrazedCoder,
Super, zastanawiałem się, dlaczego mój zaufany user-select:nonedonikąd nie prowadzi
Sean T
Próbowałem wszystkiego, ale to działało jak urok. Dzięki za uratowanie moich włosów!
Avinash Kumar
25

Ale czasami, nawet przy włączonym user-selecti touch-calloutwyłączonym, cursor: pointer;może powodować ten efekt, więc po prostu ustaw cursor: default;i zadziała.

Gustavo B.
źródło
7
To jest prawidłowa odpowiedź, cursor: pointer;naprawdę powoduje wyróżnienie. Ale -webkit-tap-highlight-color: transparent;jest bardziej uniwersalnym rozwiązaniem.
yanot
1
@yanot: przeczytaj ostrzeżenie -webkit-tap-highlight-colorprzed oznaczeniem go jako względnie uniwersalnego rozwiązania : developer.mozilla.org/en-US/docs/Web/CSS/…
Hassan Baig
@HassanBaig Myślę, że to oczywiste, że nie chodziło mi o uniwersalną przeglądarkę internetową , ale w tym kontekście, czyli w różnych wersjach Chrome
yanot
2
dzięki - żadne inne rozwiązanie nie zadziałało. Musiałem usunąć wskaźnik kursora, aby niebieskie podświetlenie
zniknęło
3
cursor: defaultzałatwił mi sprawę, gdy nic innego nie działało.
Telarian
-2

Spróbuj utworzyć procedurę obsługi dla zdarzenia select na tych elementach, a w module obsługi możesz wyczyścić zaznaczenie.

Spójrz na to:

Wyczyść zaznaczenie tekstu za pomocą JavaScript

To przykład wyczyszczenia zaznaczenia. Wystarczy go zmodyfikować, aby działał tylko na określonym elemencie, którego potrzebujesz.

Floremin
źródło
Więc nie można tego naprawić przez CSS, co? Czy mogę po prostu wyczyścić zaznaczony tekst w moim module obsługi kliknięć? EDYCJA - Dzięki za przykład. To jest do bani, że musi być obsługiwane przez JavaScript. Miałem nadzieję, że to tylko problem z CSS.
Smith
Czy będzie to miało wpływ na dostępność?
Smith
Możesz wyczyścić tekst w module obsługi kliknięć, ale spójrz na odpowiedź @smts z czystym CSS.
Floremin
-8

To działa najlepiej dla mnie:

.noSelect:hover {
  background-color: white;
}
nagy.zsolt.hun
źródło
6
To jest ZŁE i droga do pewnego przyszłego piekła. Bez obrazy.
Mike Barwick
co jeśli tło strony internetowej nie jest białe?
rideon88
Tego nie da się utrzymać. Nikt tego nie robi, proszę.
Telarian