user-select
        
        
          Limited availability
        
        
        
          
                
              
                
              
                
              
        
        
      
      This feature is not Baseline because it does not work in some of the most widely-used browsers.
Свойство 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.
Примечание: CSS UI 4 renames user-select: element to contain.
Формальное определение
| Начальное значение | auto | 
|---|---|
| Применяется к | все элементы | 
| Наследуется | нет | 
| Обработка значения | как указано | 
| Animation type | discrete | 
Формальный синтаксис
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;
}
Результат
Спецификации
| Specification | 
|---|
| CSS Basic User Interface Module Level 4> # content-selection> | 
Совместимость с браузерами
Loading…
Смотрите также
- ::selection
- Объект JavaScript Selection.
- user-select in CSS Basic User Interface Module Level 4.