Выбор пользователя - 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 */ )

Вот несколько их демонстраций:

См. Демонстрацию Криса Койера (@chriscoyier) по выбору пользователя Pen на 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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.