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

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