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

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

Я попытался использовать контур: нет, но нет эффекта. Есть ли какие-то решения там?

6 51
css google-chrome

6 ответов:

кроме ссылка предоставлена 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" атрибут элемента, к которому вы хотите применить этот класс. Я настоятельно рекомендую попробовать это решение CSS. Ничего плохого в использовании JavaScript, я просто считаю, что это потенциально может быть проще, и немного очистить вещи в вашем коде.

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

75

для Chrome на Android, я использовал - webkit-tap-highlight-color CSS property:

-webkit-tap-highlight-color: transparent;
115

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

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

:focus {
    outline: none !important;
}
24

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

9

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

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

очистить выделение текста с помощью JavaScript

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

-1

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

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