Свойство CSS user-select
Свойство CSS user-select определяет поведение выделения текста. Читайте о значениях и смотрите примеры.
Свойство CSS user-select контролирует, может ли пользователь выделять текст мышью, клавиатурой или долгим нажатием на сенсорных устройствах. Оно не меняет то, как текст выглядит — оно влияет только на поведение выделения.
На этой странице описывается, что делает каждое значение, когда стоит применять user-select, на что обратить внимание, а также приведены запускаемые примеры, которые можно редактировать.
Зачем использовать user-select
Выделение текста — стандартное поведение браузера, поэтому в большинстве случаев его не нужно менять. Однако бывают ситуации, когда это делается намеренно:
- Предотвращение случайного выделения на элементах управления — кнопках, вкладках, пунктах меню, маркерах перетаскивания. Когда пользователь дважды щёлкает или перетаскивает один из таких элементов, браузер выделяет метку, что выглядит некорректно.
user-select: noneпредотвращает это. - Копирование одним кликом для коротких строк, таких как промокоды, ключи API или команды.
user-select: allвыделяет весь элемент одним кликом, чтобы пользователь мог мгновенно его скопировать. - Восстановление выделения когда родительский элемент отключил его, но один дочерний элемент (адрес, блок кода) всё равно должен допускать выделение — установите
user-select: textна дочернем элементе.
Значение по умолчанию — "auto", которое определяется следующим образом:
- Для псевдоэлементов ::before и ::after вычисленное значение равно "none"
- Если элемент является редактируемым, вычисленное значение равно "contain",
- Если вычисленное значение user-select родительского элемента равно "all", вычисленное значение равно "all".
- Если вычисленное значение user-select родительского элемента равно "none", вычисленное значение равно "none",
- В остальных случаях вычисленное значение равно "text".
Вендорные префиксы (-webkit-, -moz-) теперь устарели во всех современных браузерах. Стандартное свойство user-select полностью поддерживается без них.
| Начальное значение | auto |
|---|---|
| Применяется к | Всем элементам, хотя некоторые значения не оказывают эффекта на неинлайновые элементы. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM Syntax | object.style.userSelect = "text"; |
Синтаксис
Значения CSS user-select
user-select: auto | none | text | all | contain | initial | inherit;Пример свойства user-select со значением "auto":
Пример кода CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: auto;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>В приведённом примере текст может быть выделен, если браузер это допускает.
Пример свойства user-select со значением "none":
Пример CSS user-select с префиксами
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: none;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Текст не может быть выделен.
Пример свойства user-select со значением "all":
Пример CSS user-select со значением all
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: all;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Щелчок в любом месте элемента выделяет весь текст внутри него — удобно для копирования кодов или команд одним кликом.
Пример свойства user-select со значением "text":
Пример CSS user-select со значением text
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: text;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Пользователь может выделять текст обычным образом. Это значение полезно для повторного включения выделения на отдельном дочернем элементе, когда у предка установлено user-select: none.
На что обратить внимание
user-select: none— не средство защиты. Оно лишь блокирует случайное выделение мышью или клавиатурой — текст по-прежнему находится в DOM и полностью доступен через «Просмотр источника», программы чтения с экрана и копирование с клавиатуры во многих браузерах. Никогда не используйте его для «защиты» контента.- Оно не отключает копирование программным путём или через контекстное меню → Копировать во всех браузерах. Если вам действительно нужно заблокировать копирование, необходимо обрабатывать событие
copyв JavaScript — но хорошо подумайте, стоит ли это делать. - Наследуется? Нет.
user-selectне наследуется в обычном смысле, но его вычисленное значение зависит от родителя (см. правила для "auto" выше), поэтому установкаnoneна контейнере фактически влияет на его потомков. - Используйте совместно с
pointer-eventsосознанно. Они решают разные задачи:user-selectуправляет выделением текста, тогда какpointer-eventsуправляет тем, реагирует ли элемент на события мыши и касания.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| auto | Текст может быть выделен, если браузер это допускает. Это значение по умолчанию для данного свойства. | Попробовать » |
| none | Текст не выделяется. | Попробовать » |
| text | Текст выделяется пользователем. | Попробовать » |
| all | Текст выделяется одним кликом. | Попробовать » |
| contain | Текст может быть выделен, но выделение не может выходить за границы элемента. Обычно используется для редактируемых элементов. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Связанные свойства
pointer-events— управление тем, реагирует ли элемент на события мыши и касания.cursor— изменение курсора мыши, отображаемого над элементом.::beforeи::after— псевдоэлементы, у которых вычисленное значениеuser-selectвсегда равноnone.