Перейти к содержанию

user-select

Свойство user-select управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста.

Обычно применяется для интерактивных элементов, на которые можно щёлкать, например, вкладки, и для которых выделение текста нежелательно.

Демо

Интерфейс

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

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

/* Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

/* WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;

/* Doesn't work in Safari; use only
"none" or "text", or else it will
allow typing in the <html> container */
-webkit-user-select: all;

/* Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;

Значения

auto

Для редактируемых элементов значение принимается contain. Если у родителя значение user-select установлено как all, то для элемента оно тоже будет all. Если у родителя значение user-select установлено как none, то для элемента оно тоже будет none. Во всех остальных случаях принимается значение text.

none

Пользователю запрещено выделять элемент.

text

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

all

Позволяет выделить текст внутри элемента, включая дочерние элементы.

contain

Позволяет выделять текст, но только внутри границ элемента.

Примечание

  • Internet Explorer поддерживает свойство -ms-user-select.
  • Chrome, Opera, Safari и Android поддерживают свойство -webkit-user-select.
  • Firefox поддерживает свойство -moz-user-select.
  • Значение contain поддерживается только в IE.

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

Применяется ко всем элементам

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

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

Can I Use user-select-none? Data on support for the user-select-none feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
    <head>
        <meta charset="utf-8" />
        <title>user-select</title>
        <style>
            body {
                -ms-user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                user-select: none;
            }
            .enable {
                -ms-user-select: all;
                -moz-user-select: all;
                -webkit-user-select: all;
                user-select: all;
            }
        </style>
    </head>
    <body>
        <p>Этот текст нельзя выделить</p>
        <p>
            <input
                type="text"
                value="Этот текст можно выделить"
            />
        </p>
        <p class="enable">
            Этот <b>текст</b> тоже можно выделить
        </p>
    </body>
</html>

Комментарии