Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

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

CSS свойства

Определение и применение

CSS свойство user-select определяет может ли пользователь выделить текст элемента.

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

Свойство и его значенияChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
user-select 54.0
1
-webkit-
69.0
1
-moz-

49
-webkit-
15.0210.0
-ms-
Да
-ms- или
-webkit-
all 53.01.040.0НетНетНет
auto 1.01.015.0210.0Да
contain НетНетНетНет10.0*Да*
none 1.021.0*
1-65.0
-moz-
15.0210.0Да
text 1.01.015.02.0*10.0Да

Синтаксис:

CSS синтаксис:

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

JavaScript синтаксис:

object.style.userSelect="none"

Значения свойства

ЗначениеОписание
allВыделение текста производится одним щелчком мыши вместо двойного щелчка. Если клик произошел во вложенном элементе, будет выбрано все содержимое коренного предка.
autoВыбранное значение определяется следующим образом:
  • Для псевдоэлементов ::before и ::after выбранное значение равно none.
  • Если элемент является редактируемым элементом, то выбранное значение соответствует contain.
  • Если выбранное значение параметра user-select на родительском элементе равно all, выбранное значение равно all.
  • Если значение параметра user-select для родительского элемента равно none, выбранное значение равно none.
  • В другом случае выбранное значение соответствует text.
Является значением по умолчанию.
containПозволяет начать выделение внутри элемента, но при этом выделение будет доступно в пределах только границ этого элемента.
textТекст может быть выбран пользователем.
noneТекст элемента и его вложенных элементов не выбирается.

Версия CSS

CSS Basic User Interface Module Level 4.

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства user-select</title>
<style> 
.none {
	-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; /* выделение текста производится одним щелчком мыши вместо двойного щелчка */
}
</style>
</head>
	<body>
		<p class = "none">Текст, который не выделить.</p>
		<p class = "all">Кликни один раз, чтобы выбрать весь текст.</p>
	</body>
</html>

В этом примере мы разместили два элемента <p> . С помощью свойства user-select мы указали для первого элемента значение none, которое определяет, что текст элемента и его вложенных элементов не выбирается, а для второго значение all, которое определяет, что выделение текста производится одним щелчком мыши вместо двойного щелчка.

Результат примера:

Пример использования свойства user-select.
Пример использования свойства user-select.
CSS свойства
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.