user-select

Ограниченная доступность

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

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

Попробуйте

Синтаксис

/* 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 basic user interface определяет значение contain для свойства user-select для включения выделения, начинающегося внутри элемента, содержащегося в пределах границ этого элемента. Однако это не поддерживается ни в одном браузере.

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

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

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

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

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

Результат

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

Спецификация
CSS Basic User Interface Module Level 4 # content-selection

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`user-select`	541	791212–79	69491	4115	32–3	5418	79494	4114	3	6.01.0	544.4
`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	211–65	15	2	18	214–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–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/user-select