В любом случае, чтобы избежать синего выделения элементов в Chrome при быстром нажатии?

В большинстве случаев я не беспокоюсь об этом, но у меня есть карусель изображений, и если я быстро нажму на следующий и предыдущий divs, они будут выделены в Chrome.

Я попытался использовать контур: нет, но никакого эффекта. Существуют ли какие-либо решения?

Ответы

Ответ 1

В дополнение к ссылке, предоставленной Floremin, которая очищает выделение текста с помощью JavaScript, чтобы "очистить" выделение, вы также можете использовать чистый CSS для этого. CSS здесь...

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Просто добавьте атрибут class="noSelect" к элементу, к class="noSelect" вы хотите применить этот класс. Я очень рекомендую попробовать это решение CSS. Ничего плохого в использовании JavaScript, я просто считаю, что это может быть проще, и немного очистить ваш код.

Для хрома на -webkit-tap-highlight-color: transparent; это дополнительное правило, с которым вы можете поэкспериментировать для поддержки в Android.

Ответ 2

Для Chrome на Android вы можете использовать CSS-свойство -webkit-tap-highlight-color:

-webkit-tap-highlight-color - это нестандартное свойство CSS, которое устанавливает цвет подсветки, которая появляется над ссылкой во время ее нажатия. Подсветка указывает пользователю, что его касание успешно распознается, и указывает, на каком элементе они касаются.

Чтобы полностью удалить выделение, вы можете установить значение transparent:

-webkit-tap-highlight-color: transparent;

Ответ 3

Я использую Chrome версии 60, и ни один из предыдущих ответов CSS не работал.

Я обнаружил, что Chrome добавляет синюю подсветку с помощью стиля outline. Добавление следующего CSS исправлено для меня:

:focus {
    outline: none !important;
}

Ответ 4

Но иногда даже при отключении user-select и touch-callout cursor: pointer; может вызвать этот эффект, поэтому просто установите cursor: default;, и он будет работать.

Ответ 5

Попробуйте создать обработчик для события select для этих элементов, а в обработчике вы можете очистить выделение.

Взгляните на это:

Очистить выбор текста с помощью JavaScript

Это пример очистки выбора. Вам нужно будет только изменить его для работы только с определенным элементом, который вам нужен.

Ответ 6

Это работает лучше для меня:

.noSelect:hover {
  background-color: white;
}