Свойство user-select
в CSS управляет выделением текста и других элементов. Например, его можно использовать, чтобы сделать текст недоступным для выделения:
.row-of-icons {
-webkit-user-select: none; /* Chrome / Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
Свойство бывает полезно в ситуациях, когда нужно предоставить пользователям возможность копирования более чистого контента без ненужных деталей в виде значков и других элементов оформления.
Однако это не всегда хорошо работает. WebKit позволяет копировать текст, если вы выделяете элементы вокруг него.
Вы также можете использовать это свойство, чтобы обеспечить выделение всего элемента:
.force-select {
-webkit-user-select: all; /* Chrome 49+ */
-moz-user-select: all; /* Firefox 43+ */
-ms-user-select: all; /* до сих пор не поддерживается */
user-select: all;
}
Значения свойства
auto
– Для редактируемых элементов значение принимаетсяcontain
. Если у родителяuser-select
равноall
, то и для дочернего элемента оно будетall
. Если у родителяuser-select
установлено вnone
, то для дочернего элемента оно тоже будетnone
. Во всех остальных случаях равноtext
.none
– Выделение запрещено.text
– Можно выделить только текст.all
– Выделяется весь текст внутри элемента, включая дочерние объекты.contain
– Позволяет выделит текст только внутри границ элемента.
Вот несколько примеров работы:
See the Pen
user-select by Андрей (@adlibi)
on CodePen.
Некоторое время не существовало спецификации для этого свойства, но теперь оно рассматривается в модуле базового пользовательского интерфейса CSS 4-го уровня.
Значение по умолчанию – auto
, это обеспечивает выделение, как обычно. «Обычно» не всегда понятно. Здесь стоит процитировать спецификацию:
- Для псевдоэлементов
::before
и::after
вычисленное значение равно none. - Если элемент является редактируемым, вычисленное значение –
contain
. - Иначе, если вычисленное значение user-select для родителя этого элемента равно
all
, тогда вычисленное значение –all
. - В противном случае, если значение
user-select
для родителя равноnone
, то и для потомка оно равноnone
. - В противном случае значение –
text
.
Другими словами, свойство выборочно наследуется.