w3docs logo

CSS свойство user-select

Свойство user-select определяет, может ли пользователь выбрать текст.

Значение по умолчанию -"auto":

  • Для псевдоэлементов ::before и ::after вычисленное значение - "none"
  • Если элемент редактируемый, вычисленное значение - "contain",
  • Если вычисленным значением свойства user-select для родительского элемента является "all", вычисленным значением будет "all".
  • Если вычисленным значением свойства user-select для родительского элемента является "none", вычисленным значением будет "none",
  • В других случаях вычисленным значением будет "text".
Для максимальной совместимости браузера могут быть использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии),-moz- для Firefox.
Значение по умолчанию auto
Применяется Ко всем элементам, но некоторые значения не имеют эффекта на нестрочных элементах.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.userSelect = "text";

Синтаксис

user-select: auto | none | text | all | contain | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Звголовок документа</title>
    <style> 
      div {
      -webkit-user-select: auto; /* Safari 3.1+ */
      -moz-user-select: auto; /* Firefox 2+ */
      user-select: auto; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства user-select</h2>
    <div>Lorem Ipsum - это текст-"рыба".</div>
  </body>
</html>

В следующем примере текст не может быть выбран:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      -webkit-user-select: none; /* Safari 3.1+ */
      -moz-user-select: none; /* Firefox 2+ */
      user-select: none; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства user-select</h2>
    <div>Lorem Ipsum - это текст-"рыба".</div>
  </body>
</html>

Пример, где можно выбрать текст одним щелчком:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      -webkit-user-select: all; /* Safari 3.1+ */
      -moz-user-select: all; /* Firefox 2+ */
      user-select: all; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства user-select</h2>
    <div>Lorem Ipsum - это текст-"рыба".</div>
  </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      -webkit-user-select: text; /* Safari 3.1+ */
      -moz-user-select: text; /* Firefox 2+ */
      user-select: text; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства user-select</h2>
    <div>Lorem Ipsum - это текст-"рыба".</div>
  </body>
</html>

Значения

Значение Описание
auto Текст выбран, если браузер разрешает. Значение по умолчанию.
none Текст не выбран.
text Текст выбран пользователем.
all Текст выбран одним щелчком.
contain Текст выбран, если элемент редактируемый.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
54.0+
4.0 - 53.0 -webkit- 		2.0 -moz- 3.1 -webkit- 41.0+
15.0 - 40.0 -webkit-

Практикуйте свои знания

What does the CSS property 'user-select' do?
Считаете ли это полезным?