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

Базовая поддержка Ограниченная доступность

Эта функция не относится к базовым, поскольку не работает в некоторых наиболее широко используемых браузерах.

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

Попробуйте

user-select: none;

user-select: text;

user-select: all;

<section id="default-example">
  <p id="example-element">Try to select this text</p>
</section>

#example-element {
  font-size: 1.5rem;
}

Синтаксис

/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: all;

/* Global values */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;

Примечание: user-select не является наследуемым свойством, хотя начальное значение auto в большинстве случаев заставляет его вести себя как наследуемое. Браузеры на основе WebKit/Chromium действительно реализуют это свойство как наследуемое, что противоречит поведению, описанному в спецификации, и может привести к некоторым проблемам. На данный момент Chromium решил исправить проблемы, чтобы итоговое поведение соответствовало спецификациям.

Значения

none

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

auto

Используемое значение auto определяется следующим образом:

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

text

Пользователь может выделять текст.

all

Содержимое элемента выделяется целиком: если выделение включает часть элемента, оно должно включать весь элемент вместе со всеми его потомками. Если двойной щелчок или щелчок правой кнопкой мыши произошёл во вложенном элементе, будет выделен самый старший предок со значением этого свойства.

Примечание: Модуль базового пользовательского интерфейса CSS определяет значение contain для свойства user-select, которое позволяет начинать выделение внутри элемента, ограничивая его границами этого элемента. Однако ни один браузер не поддерживает это значение.

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

Начальное значение	auto
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	как задано
Тип анимации	дискретный

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

user-select = 
  auto |
  text |
  none |
  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 {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

.all {
  -webkit-user-select: all;
  user-select: all;
}

Результат

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

Спецификация
Модуль базового пользовательского интерфейса CSS, уровень 4 # content-selection

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`user-select`	54 1	79 12 12–79	69 49 1	41 15	3 2–3	54 18	79 49 4	41 14	3	6.0 1.0	54 4.4	3
`all`	53	79	1	40	16	53	4	41	16	6.0	53	Нет
`auto`	1	12	1	15	2	18	4	14	3	1.0	4.4	Нет
`none`	1	12	21 1–65	15	2	18	21 4–65	14	3	1.0	4.4	Нет
`text`	1	12	1	15	2	18	4	14	3	1.0	4.4	Нет

См. также

псевдоэлемент ::selection
объект JavaScript Selection

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/user-select