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.
Odpowiedzi:
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
Rozwiązuje problem, ponieważ ustawia przezroczysty kolor podświetlenia.
Źródło: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/
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;rgba(0,0,0,0)zamiastrgba(255,255,255,0)
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ł.
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.
-webkit-tap-highlight-color: transparent;jest również w porządku.