user-select

Свойство CSS user-select определяет может ли пользователь выбрать текст. Оно не влияет на контент, загруженный как chrome, за исключением текстовых блоков.

Синтаксис

/* Ключевые слова */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Глобальные значения */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;

Значения

none

Текст элемента и вложенных в него элементов не выбирается. Обратите внимание, что объект Selection может содержать эти элементы.

auto

Вычисляемое значение, автоматически определяется следующим образом:

• Для псевдо-элементов ::before и ::after вычисляемое значение - none
• Если элемент является редактируемым, вычисляемое значение - contain
• Иначе, если вычисляемое значение user-select для родителя этого элемента - all, вычисляемое значение - all
• Иначе, если вычисляемое значение user-select для родителя этого элемента - none, вычисляемое значение - none
• Иначе, вычисляемое значение - text

text

Текст может быть выбран пользователем.

all

В HTML-редакторе, если двойной клик или контекстный клик произошёл во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.

contain

Позволяет начать выбор внутри элемента; однако, выбор будет содержаться внутри границ данного элемента.

element Не стандартно (IE-specific alias)

Аналогичен contain. Поддерживается только в Internet Explorer.

Формальное определение

Формальный синтаксис

user-select = 
 auto | 
 text | 
 none | 
 contain | 
 all 

Примеры

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

.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;
}

Результат

Спецификации

Совместимость с браузерами

Смотрите также

• ::selection
• Объект JavaScript Selection.
• user-select in CSS Basic User Interface Module Level 4.