Отключить синюю подсветку при нажатии/нажатии объекта с помощью курсора: указатель

Существует синяя подсветка, которая появляется всякий раз, когда Div, имеющее курсор: применяемое свойство указателя затрагивается в Chrome. Как мы можем избавиться от него?

Я пробовал следующее:

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

Но они не влияют на синюю подсветку при нажатии курсора.

Ответ 1

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

Устраняет проблему, поскольку цвет подсветки прозрачен.

Источник: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/

Ответ 2

Насколько я знаю, ответ Влада К может вызвать проблемы в некоторых устройствах Android. Решение:

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

Ответ 3

Просто добавьте это в свою таблицу стилей и просто добавьте атрибут class="on_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;

}

Спасибо :)