Свойство user-select

Описание

Управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста. Обычно применяется для интерактивных элементов, на которые можно щёлкать, например, вкладки, и для которых выделение текста нежелательно.

Internet Explorer и Edge поддерживают свойство -ms-user-select.

Chrome до версии 54, Opera до версии 41, Safari и Android поддерживают свойство -webkit-user-select.

Firefox поддерживает свойство -moz-user-select.

Значение contain поддерживается только в IE.

Синтаксис

user-select: auto | none | text | all | contain;

Подробности

Значение	Описание
auto	Для редактируемых элементов значение принимается contain. Если у родителя значение user-select установлено как all, то для элемента оно тоже будет all. Если у родителя значение user-select установлено как none, то для элемента оно тоже будет none. Во всех остальных случаях принимается значение text.
none	Пользователю запрещено выделять элемент.
text	Пользователь может выделить текст в элементе.
all	Позволяет выделить текст внутри элемента, включая дочерние элементы.
contain	Позволяет выделять текст, но только внутри границ элемента.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 .non {
 user-select: none;
 }
 .enable {
 user-select: all;
 }
 </style>
 <p class='non'>Этот текст нельзя выделить</p>
 <p><input type='text' value='Этот текст можно выделить' /></p>
 <p class='enable'>Слова в этом тексте не выделяются по отдельности.</p>
</body>
</html>

Описание

Синтаксис

Подробности

Пример

Читайте также

Свойство counter-reset

Дочерние селекторы

Свойство opacity

Стиль элемента при верно введенных данных