У будь-якому разі запобігти синьому виділенню елементів у Chrome при швидкому натисканні?

123

Більшість випадків мене це не турбує, але у мене є карусель із зображеннями, і якщо швидко натиснути на наступні та попередні диски, вони будуть виділені в 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.

— смт

Це рішення, з яким я збираюся, оскільки у мене є лише вирішальне питання в Chrome, і воно чудово працює. Дякую всім, хто взяв участь!

— Сміт

36

Не вдалося це працювати з Chrome на Android. Мені довелося скористатися-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

— Івазару,

25

-webkit-tap-highlight-color: transparent; є ключовою частиною Chrome

— FisNaN

Для хромування на android -webkit-tap -light-color: прозорий; - Працювали для мене спасибі!

— CK Munn

213

Для Chrome на Android ви можете використовувати властивість -webkit-tap-select-color CSS :

-webkit-tap-select-color - це нестандартна властивість CSS, яка встановлює колір виділення, який з’являється над посиланням під час його натискання. Виділення вказує користувачеві, що їх кран успішно розпізнається, і вказує, на який елемент він натискає.

Щоб повністю видалити виділення, ви можете встановити значення transparent:

-webkit-tap-highlight-color: transparent;

Майте на увазі, що це може мати наслідки для доступності: див. Outlinenone.com

— Івазару
джерело

4

Я виявив, що, наприклад, коли ви працюєте на сенсорному екрані, Chrome поводитиметься так само, як і на Android. У мене був <div>, який блимав синім кольором кожного разу, коли ви клацнули десь усередині нього. Тільки коли я використав цю відповідь, це зупинилося. Дякую!

— Valorum

2

Ніхто з інших css attys цього не зробить. Так важливо, оскільки підсвічування крана спотворює зовнішній вигляд того, що натиснуто, приглушивши вашу візуальну мову.

— Домінік Серісано

23

-webkit-tap-highlight-color: transparent;здається, теж працює.

— Бернард

1

Мені це сподобалось, для сенсорних подій це обов’язково! Ця інформація має "поза графіком" корисність!

— Berker Yüceer

1

Це рішення, яке працювало для мене в 2020 році

— Blue Bot

66

Я використовую Chrome версії 60, і жоден з попередніх відповідей CSS не працював.

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

:focus {
    outline: none !important;
}

— Джефф Л.
джерело

5

ви, пане, рятувальник життя.

— Бекка

2

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

— Стефан

Працює для новіших версій Chrome. Дякую!

— CrazedCoder

Супер, цікавилося, чому моїх довірливих не user-select:noneбуло куди нікуди

— Шон Т

Я спробував все, але це спрацювало як шарм. Дякуємо, що врятували мої волоски!

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

25

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

— Густаво Б.
джерело

7

Це правильна відповідь, cursor: pointer;дійсно викликає родзинку. Але -webkit-tap-highlight-color: transparent;є більш універсальним рішенням.

— янот

1

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

— Хассан Байг

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

— янот

2

дякую - жодне з інших рішень не працювало на мене. Довелося видалити вказівник курсору, щоб синя підсвітка зникла

— RVP

3

cursor: defaultзробив трюк для мене, коли більше нічого не працювало.

— Телярій

-2

Спробуйте створити обробник для події вибору для цих елементів, і в обробці ви можете очистити вибір.

Погляньте на це:

Очистити вибір тексту за допомогою JavaScript

Це приклад очищення виділення. Вам потрібно буде лише змінити його, щоб він працював лише на конкретному елементі, який вам потрібен.

— Флоремін
джерело

Так що це неможливо виправити за допомогою CSS, так? Чи можу я просто очистити вибраний текст у моїй обробці кліків? EDIT - спасибі за приклад. Це гадає, що з ним потрібно оброблятись через javascript. Я сподівався, що це лише питання CSS.

— Сміт

Також це матиме вплив на доступність?

— Сміт

Ви можете очистити текст у обробці кліків, але подивіться на @smts відповідь із чистим CSS.

— Флоремін

-8

Це найкраще для мене:

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

— nagy.zsolt.hun
джерело

6

Це БАД і шлях до певного майбутнього пекла. Без образ.

— Майк Барвік

що робити, якщо фон веб-сайту не білий?

— rideon88

Це не піддається ремонту. Ніхто цього не роби.

— Телярій