CSS стиль user-select. Изменение выделения текста с помощью user-select
CSS стиль user-select управляет поведением выделения текста и других элементов на странице. Это незаменимое CSS свойство когда нужно запретить выделение текста.
Internet Explorer поддерживает свойство -ms-user-select.
Chrome, Opera, Safari и Android поддерживают свойство -webkit-user-select.
Firefox поддерживает свойство -moz-user-select.
Значение contain поддерживается только в IE.
Чаще всего CSS стиль user-select применяется для кликабельных интерактивных элементов, для которых нежелательно выделение текста.
Краткая информация по CSS-свойству user-select
Значение по умолчанию | auto |
Наследуется | Да |
Применяется | Ко всем элементам |
Правила написания свойства user-select
user-select: auto | none | text | all | contain
Пройдемся теперь по всем значениям.
auto
- для редактируемых элементов значение принимается contain. Если у родительского элемента user-select установлено как all (none), то для элемента оно тоже будет all (none). Во всех остальных случаях принимается значение text.
none
- пользователю запрещается выделять элемент.
text
- пользователь может выделить текст в элементе.
all
- позволяет выделить текст внутри элемента, включая дочерние элементы.
contain
- позволяет выделять текст, но лишь внутри элемента.
Пример применения стиля user-select
Проиллюстрируем работу user-select на примере. Давайте сделаем так, чтобы верхний текст нельзя было выделить. Не забудьте про кроссбраузерное написание user-select.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля user-select</title>
<style>
body {
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.enable {
-ms-user-select: all;
-moz-user-select: all;
-webkit-user-select: all;
user-select: all;
}
</style>
</head>
<body>
<p>Ха! А этот текст нельзя выделить</p>
<p><input type="text" value="Этот текст выделяется"></p>
<p class="enable">Этот текст тоже выделяется</p>
</body>
</html>