user-select
Свойство CSS user-select
определяет может ли пользователь выбрать текст. Оно не влияет на контент, загруженный как chrome, за исключением текстовых блоков.
css
/* Ключевые слова в значении */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Глобальные значения */
user-select: inherit;
user-select: initial;
user-select: unset;
/* Специфичные для Mozilla значения */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
/* Специфичные для WebKit значения */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /*Не работает Safari; используйте только
"none" или "text", или, в противном случае, оно
будет разрешать ввод в <html> контейнер */
/* Специфичные для Microsoft значения */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
Начальное значение | auto |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Синтаксис
none
-
Текст элемента и вложенных в него элементов не выбирается. Обратите внимание, что объект
Selection
(en-US) может содержать эти элементы. auto
-
Вычисляемое значение, автоматически определяется следующим образом:
- Для псевдо-элементов
::before
и::after
вычисляемое значение -none
- Если элемент является редактируемым, вычисляемое значение -
contain
- Иначе, если вычисляемое значение
user-select
для родителя этого элемента -all
, вычисляемое значение -all
- Иначе, если вычисляемое значение
user-select
для родителя этого элемента -none
, вычисляемое значение -none
- Иначе, вычисляемое значение -
text
- Для псевдо-элементов
text
-
Текст может быть выбран пользователем.
all
-
В HTML-редакторе, если двойной клик или контекстный клик произошёл во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.
contain
-
Позволяет начать выбор внутри элемента; однако, выбор будет содержаться внутри границ данного элемента.
element
Non-standard (IE-specific alias)-
Аналогичен
contain
. Поддерживается только в Internet Explorer.
Примечание: CSS UI 4 renames user-select: element to contain.
Формальный синтаксис
Примеры
HTML
html
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
CSS
css
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.all {
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
user-select: all;
}
Результат
Спецификации
Specification |
---|
CSS Basic User Interface Module Level 4 # content-selection |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
::selection
- Объект JavaScript
Selection
(en-US). - user-select in CSS Basic User Interface Module Level 4.