Як зупинити виділення елемента div при подвійному клацанні

93

У мене є цей елемент div із фоновим зображенням, і я хочу припинити виділення елемента div при подвійному клацанні. Чи існує для цього властивість CSS?

— Дейв
джерело

У якому браузері ви? Під час тестування я не міг отримати цілий div для виділення у Firefox 5, Chrome 12 або IE9.

— tw16,

159

Наведений нижче CSS зупиняє користувачів у можливості виділення тексту. Приклад у реальному часі : http://jsfiddle.net/hGTwu/20/

-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

Для націлювання на IE9 вниз та Opera unselectableзамість цього слід використовувати атрибут html :

<div unselectable="on">Test Text</div>

— tw16
джерело

це не завадило виділити весь div. Я помітив, що це лише для тексту. Я хочу запобігти виділенню всього div при подвійному клацанні на ньому.

— Дейв

@dave: Я припускав, що єдиний раз, коли подвійне клацання викликало виділення, це те, коли в ньому був текст, який ви мали на увазі. Не потрібно голосувати проти.

— tw16,

1

Не працює в IE або Opera. Вам потрібен unselectableатрибут. До -o-user-selectречі, немає.

— Тім Даун

примітка для користувачів SASS / SCSS: ви можете @include user-select(none);замість того, щоб використовувати необроблений CSS

— hilnius

Дивно, що це призвело до того, що divs можна перетягувати навіть тоді draggable = false, але лише у Firefox.

— rovyko

52

Це працює для мене

html
{
  -webkit-tap-highlight-color:transparent;
}

— Ганс
джерело

Це повинна бути найкраща відповідь.

— JohnA10

11

Це буде актуально лише для браузерів webkit, таких як Chrome та Safari, і, ймовірно, не буде працювати в будь-якій версії IE або Firefox.

— Саймон Іст

30

Я намагався знайти рішення, як зупинити підсвічування div у Chrome, і звернувся до цієї публікації. Але, на жаль, жодна з відповідей не вирішила моєї проблеми.

Після багатьох онлайн-досліджень я виявив, що виправлення - це щось дуже просте. Не потрібно ніяких складних CSS. Просто додайте наступний CSS на свою веб-сторінку, і все готово. Це працює як на ноутбуках, так і на мобільних екранах.

div { outline-style:none;}

ПРИМІТКА : Це працювало у версії Chrome 44.0.2403.155 м. Крім того, він підтримується у всіх основних браузерах сьогодні, як пояснюється за цією URL-адресою: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

— Суніл
джерело

8

Я не фахівець з CSS, але, на мою думку, ви можете використовувати відповідь tw16, якщо ви розширите кількість елементів, на які це впливає. Наприклад, це запобігає виділенню скрізь на моїй сторінці, не впливаючи на інший вид інтерактивності:

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

Цей перший рядок надано Полом Ірландським (через http://adamschwartz.co/magic-of-css/chapters/1-the-box/ ).

— SterlingVix
джерело

Ніколи не використовуйте цей CSS, коли у вас є PWA на iOS 13, це повністю блокує клавіатуру.

— Фер

2

Орієнтувати всі елементи div:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

Націлювання на всі елементи:

::-moz-selection { background:transparent; }
::selection { background:transparent; }

— jasonleonhard
джерело

1

вимкнути вибір користувача:

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

встановити прозорий фон для вибраного елемента:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

— Джин.
джерело

3

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

— msrd0

0

Якщо елемент можна натиснути, ви можете зробити його кнопковим елементом.

— Медда86
джерело