Вимкніть виділення блакитним кольором, коли дотик / натискання об’єкта за допомогою курсору: вказівник

83

Існує синя підсвітка, яка з’являється щоразу, коли в Chrome стикається Div, у якому застосовано властивість курсора: Як ми можемо від цього позбутися?

Я спробував наступне:

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

Але вони не впливають на синє підсвічування при натисканні курсору.

— Улад Касач
джерело

122

-webkit-tap-highlight-color:  rgba(255, 255, 255, 0);

Подбає про проблему, оскільки задає прозорий колір виділення.

Джерело: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/

— Улад Касач
джерело

6

-webkit-tap-highlight-color: transparent;це теж добре.

— Ніл Морган,

87

Наскільки мені відомо, відповідь Влада К. може спричинити проблеми у деяких пристроях Android. Краще рішення:

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

Розгорніть фрагмент

— Обу Ченг
джерело

Будь ласка, поясніть, який варіант відповіді "відповідь вище"

— Німа Дерахшанджан,

1

чому ви використали rgba(0,0,0,0)замість цьогоrgba(255,255,255,0)

— Гаурава Аггарваля

1

@GauravAggarwal Альфа- простір має сенс, тому немає різниці між rgba (0,0,0,0) та rgba (255,255,255,0). Це просто випадок, на мою думку. Чи rgba (255,255,255,0) діє дивно?

— Oboo Cheng

4

Якщо ви все одно збираєтесь замінити його прозорим, навіщо взагалі декларація rgba? Чи існують версії WebKit, які якось не підтримують прозоре ключове слово у цій властивості?

— BoltClock

4

@BoltClock .Я дійсно не можу знайти ключове слово `` прозорий '' у документі MDN, тому я вважаю, що це не є стандартним.Перед тим, як я відповім на це запитання, я прочитав цю статтю , ** Порада коментаря Крістіана Кука **, щоб додати це, тому що він любить Я думаю, це помилка певного пристрою.

— Oboo Cheng

12

Просто додайте це у свою таблицю стилів і просто додайте class="no_highlights"атрибут до елемента, до якого ви хочете застосувати цей клас.

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

або ви можете зробити це глобально для всіх елементів, видаливши ім'я класу і зробивши це.

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;

}

Дякую :) але все одно. синя облямівка є функцією доступності. Це виглядає погано, але, Це допомагає тому, хто це найбільше потребував.

— асіт
джерело

1

Згідно з документами ви можете просто зробити це:

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

Мені це підходить для Chrome 68 для Android та Chrome 80 для Windows.

— Ерік Мутта
джерело