Свойство 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.
Другими словами, свойство выборочно наследуется.
