Wyłącz niebieskie podświetlenie po dotknięciu / naciśnięciu obiektu kursorem: wskaźnikiem

83

Za każdym razem, gdy w przeglądarce Chrome zostanie dotknięta właściwość DIV z zastosowaną właściwością kursora, pojawia się niebieskie podświetlenie. Jak możemy się go pozbyć?

Próbowałem następujących rzeczy:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Ale nie wpływają na niebieskie podświetlenie po naciśnięciu kursora.

html css mobile touch highlight Ulad Kasach
źródło

Odpowiedzi:

87

O ile wiem, odpowiedź Vlada K. może powodować problemy na niektórych urządzeniach z Androidem.Lepsze rozwiązanie:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
Rozwiń fragment

Oboo Cheng
źródło
Proszę wyjaśnić, która z alternatywnych odpowiedzi brzmi „odpowiedź powyżej”
Nima Derakhshanjan
1
dlaczego użyłeś rgba(0,0,0,0)zamiastrgba(255,255,255,0)
Gaurav Aggarwal
1
@GauravAggarwal Przestrzeń alfa ma sens, więc nie ma różnicy między rgba (0,0,0,0) i rgba (255,255,255,0) .To jest tylko przypadek.
Oboo Cheng
4
Jeśli i tak zamierzasz zastąpić go przezroczystością, po co w ogóle mieć deklarację rgba? Czy istnieją wersje WebKit, które w jakiś sposób nie obsługują przezroczystego słowa kluczowego w tej usłudze?
BoltClock
4
@BoltClock. Naprawdę nie mogę znaleźć „przezroczystego” słowa kluczowego w dokumencie MDN, więc myślę, że to nie jest standardowe . Zanim odpowiem na to pytanie, przeczytałem ten artykuł , ** rada komentarza ** Christiana Cooka **, aby dodać to, ponieważ przyszedł problem z jakimś urządzeniem sumsung. Myślę, że to błąd konkretnego urządzenia.
Oboo Cheng
12

Po prostu dodaj to do swojego arkusza stylów i po prostu dodaj class="no_highlights"atrybut do elementu, do którego chcesz zastosować tę klasę.

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;
}

lub możesz to zrobić globalnie dla wszystkich elementów, usuwając nazwę klasy i robiąc to. 

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;

}

Dzięki :) ale i tak. niebieskie obramowanie jest dostępne jako funkcja ułatwień dostępu. Źle wygląda, ale pomaga komuś, kto tego najbardziej potrzebował.

asith
źródło
1

Zgodnie z dokumentacją możesz po prostu zrobić to:

-webkit-tap-highlight-color: transparent; /* for removing the highlight */

U mnie działa na Chrome 68 na Androida i Chrome 80 na Windows.

Eric Mutta
źródło