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

123

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

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

css google-chrome

— кузнец
источник

Я не вижу такого эффекта в текущей версии Chrome

— Billal Begueradj

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

— collimarco

170

В дополнение к ссылке, предоставленной 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.

— СМЦ
источник

1

Только для Chrome вам, вероятно, понадобится только user-selectи webkit-user-select.

— smts 08

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

— Smith

36

Не удалось заставить его работать с Chrome на Android. Пришлось использовать-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

— Iwazaru

25

-webkit-tap-highlight-color: transparent; это ключевая часть Chrome

— FisNaN

Для Chrome на android -webkit-tap-highlight-color: transparent; - Сработало спасибо!

— CK Munn

213

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

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

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

-webkit-tap-highlight-color: transparent;

Имейте в виду, что это может повлиять на доступность: см. Outlinenone.com

— Iwazaru
источник

4

Я обнаружил, что, например, при запуске на сенсорном экране Chrome ведет себя так же, как и на Android. У меня был <div>, который мигал синим, когда вы нажимали где-нибудь внутри него. Только когда я использовал этот ответ, он остановился. Спасибо!

— Valorum

2

Ни один из других css attys этого не сделает. Это так важно, поскольку выделение касанием искажает внешний вид всего, на что вы щелкаете, делая ваш визуальный язык невнятным.

— Доминик Черизано,

23

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

— Бернард

1

Мне это понравилось, для сенсорных мероприятий это обязательно! Эта информация имеет "вне графика" полезность!

— Berker Yüceer

1

Это решение, которое сработало для меня в 2020 году

— Blue Bot

67

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

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

:focus {
    outline: none !important;
}

— Джефф Л.
источник

6

вы, сэр, спасаете жизнь.

— beckah 03

2

это рабочий для Chrome (версия 61) на Android

— Стефан

Работает с более поздними версиями Chrome. Спасибо!

— CrazedCoder

Супер, не задавался вопросом, почему мой верный user-select:noneполучал нигде

— Шон T

Я пробовал все, но это работало как шарм. Спасибо, что спасли мои волосы!

— Авинаш Кумар

25

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

— Густаво Б.
источник

7

Это правильный ответ, cursor: pointer;действительно вызывающий подсветку. Но -webkit-tap-highlight-color: transparent;это более универсальное решение.

— yanot 01

1

@yanot: прочтите предупреждение, -webkit-tap-highlight-colorпрежде чем обозначать его как относительно универсальное решение : developer.mozilla.org/en-US/docs/Web/CSS/…

— Хасан Байг

@HassanBaig Я думаю, очевидно, что я имел в виду не универсальный кроссбраузер , а в данном контексте, то есть в разных версиях Chrome

— yanot

2

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

— RVP

3

cursor: defaultпомогло мне, когда ничего не помогло.

— Telarian 04

-2

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

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

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

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

— Floremin
источник

Значит, это нельзя исправить с помощью CSS, а? Могу я просто очистить выделенный текст внутри обработчика кликов? РЕДАКТИРОВАТЬ - Спасибо за пример. Это отстой, что это нужно обрабатывать через javascript. Я надеялся, что это просто проблема с CSS.

— Smith

Кроме того, повлияет ли это на доступность?

— Smith

Вы можете очистить текст в обработчике кликов, но взгляните на ответ @smts с помощью чистого CSS.

— Floremin 08

-8

Для меня это работает лучше всего:

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

— nagy.zsolt.hun
источник

6

Это ПЛОХО и дорога в некий будущий ад. Не в обиду.

— Майк Барвик

что делать, если фон сайта не белый?

— rideon88 06

Это не обслуживается. Пожалуйста, не делайте этого.

— Telarian 04