user-select¶
Свойство user-select
управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста.
Обычно применяется для интерактивных элементов, на которые можно щёлкать, например, вкладки, и для которых выделение текста нежелательно.
Интерфейс
Синтаксис¶
/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Global values */
user-select: inherit;
user-select: initial;
user-select: unset;
/* Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
/* WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
/* Doesn't work in Safari; use only
"none" or "text", or else it will
allow typing in the <html> container */
-webkit-user-select: all;
/* Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
Значения¶
auto
- Для редактируемых элементов значение принимается
contain
. Если у родителя значениеuser-select
установлено какall
, то для элемента оно тоже будетall
. Если у родителя значениеuser-select
установлено какnone
, то для элемента оно тоже будетnone
. Во всех остальных случаях принимается значениеtext
. none
- Пользователю запрещено выделять элемент.
text
- Пользователь может выделить текст в элементе.
all
- Позволяет выделить текст внутри элемента, включая дочерние элементы.
contain
- Позволяет выделять текст, но только внутри границ элемента.
Примечание¶
- Internet Explorer поддерживает свойство
-ms-user-select
. - Chrome, Opera, Safari и Android поддерживают свойство
-webkit-user-select
. - Firefox поддерживает свойство
-moz-user-select
. - Значение
contain
поддерживается только в IE.
Значение по-умолчанию: auto
Применяется ко всем элементам
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<html>
<head>
<meta charset="utf-8" />
<title>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">
Этот <b>текст</b> тоже можно выделить
</p>
</body>
</html>