CSS свойство user-select
Свойство user-select указывает, может ли пользователь выделять текст или нет.
Значение по умолчанию — auto, которое определяется следующим образом:
- На псевдоэлементах ::before и ::after вычисленное значение равно
none - Если элемент является редактируемым, вычисленное значение равно
contain, - Если вычисленное значение
user-selectу родителя этого элемента равноall, вычисленное значение равноall. - Если вычисленное значение
user-selectу родителя этого элемента равноnone, вычисленное значение равноnone, - В остальных случаях вычисленное значение равно
text.
INFO
В современных браузерах вендорные префиксы (-webkit-, -moz-) устарели. Стандартное свойство user-select полностью поддерживается без них.
| Начальное значение | auto |
|---|---|
| Применяется к | Все элементы, хотя некоторые значения не влияют на нестрочные элементы. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.userSelect = "text"; |
Синтаксис
Значения CSS user-select
css
user-select: auto | none | text | all | contain | initial | inherit;Пример свойства user-select со значением "auto":
Пример кода CSS user-select
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: auto;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>В приведённом примере текст можно выделить, если браузер это позволяет.
Пример свойства user-select со значением "none":
Пример кода CSS user-select
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: none;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Текст выделить нельзя.
Пример свойства user-select со значением "all":
Пример кода CSS user-select (all)
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: all;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Клик в любом месте элемента выделяет весь текст внутри него.
Пример свойства user-select со значением "text":
Пример кода CSS user-select (text)
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: text;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Текст можно выделить обычным способом.
Значения
| Значение | Описание | Запустить |
|---|---|---|
| auto | Текст можно выделить, если браузер это позволяет. Это значение по умолчанию для данного свойства. | Запустить » |
| none | Текст не выделяется. | Запустить » |
| text | Текст выделяется пользователем. | Запустить » |
| all | Текст выделяется одним кликом. | Запустить » |
| contain | Текст можно выделить, но выделение не может выходить за границы элемента. Обычно используется для редактируемых элементов. | Запустить » |
| initial | Устанавливает свойству значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какое утверждение верно относительно свойства CSS user-select?