Свойство 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>Этот текст нельзя выделить
Слова в этом тексте не выделяются по отдельности.
Читайте также
Свойство border-radius
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происход...
Свойство animation-direction
Устанавливает направление движения анимации.
Свойство grid-template
Сокращение для grid-template-rows, grid-template-columns и grid-template-areas.
Свойство align-self
Используется для выравнивания флекс - элементов текущей строки. Аналог align-items, отличие в том...
Свойство padding-left
Устанавливает расстояние от внутреннего левого края рамки элемента до воображаемого прямоугольника.