Вибрати користувача - CSS-хитрощі

user-selectВластивість в CSS управляє тим, як текст в елементі дозволено вибирати. Наприклад, за допомогою нього текст не можна вибрати.

.row-of-icons ( -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ )

Це корисно в ситуаціях, коли ви хочете надати користувачам простіший / чистіший спосіб копіювання та вставлення (не дозволяйте їм випадково вибрати текстові непотрібні речі, такі як піктограми чи зображення). Однак це трохи глючить. Firefox застосовує той факт, що будь-який текст, що відповідає цьому селектору, не може бути скопійований. WebKit все ще дозволяє копіювати текст, якщо ви вибираєте елементи навколо нього.

Ви також можете використовувати це, щоб забезпечити, щоб цілий елемент отримав виділення:

.force-select ( -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ -ms-user-select: all; /* No support yet */ user-select: all; /* Likely future */ )

Ось кілька демо-версій із них:

Дивіться демонстрацію вибору користувача Pen, виконану Крісом Койєром (@chriscoyier) на CodePen.

Довгий час не було специфікацій для цієї властивості, але тепер це охоплюється модулем базового інтерфейсу користувача CSS рівня 4.

Значенням за замовчуванням є auto, що робить вибір нормальним, як ви очікуєте. "Зазвичай" дещо складне. Тут варто процитувати специфікацію:

Для псевдоелементів :: before та :: after обчислене значення становить none

Якщо елемент є редагованим елементом , обчислюваним значенням єcontain

В іншому випадку, якщо обчислюване значення user-select у батьківському елементі є all, обчислюване значення єall

В іншому випадку, якщо обчислюване значення user-select у батьківському елементі є none, обчислюване значення єnone

В іншому випадку обчислене значення становить text

Іншими словами, він розумно каскадує і повертається до сенситивного стану. Схоже, можливо, цю функцію можна використовувати для вибору псевдоелементів, але останнього слова поки немає.

Старіші / Власні

Firefox підтримує -moz-none, що так само як ніхто, окрім того, що це означає, що субелементи можуть замінити каскад і знову стати доступними для вибору. -moz-user-select: text;Починаючи з Firefox 21, ніхто не поводиться як -moz-none.

Internet Explorer також підтримує поки що власне значення, elementв якому ви можете виділити текст всередині елемента, але вибір зупиниться на межі цього елемента.

Більше інформації

Документи MDN
Взаємодія користувачів

Підтримка браузера

Це спеціально для -*-user-select: none;

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