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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
---
title: user-select
slug: Web/CSS/user-select
tags:
- Вёрстка
- Свойство
translation_of: Web/CSS/user-select
---
<div>{{CSSRef}}</div>
<p>Свойство <a href="/en-US/docs/Web/CSS">CSS</a> <code><strong>user-select</strong></code> определяет может ли пользователь выбрать текст. Оно не влияет на контент, загруженный как {{Glossary("Chrome", "chrome")}}, за исключением текстовых блоков.</p>
<pre class="brush:css">/* Ключевые слова в значении */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Глобальные значения */
user-select: inherit;
user-select: initial;
user-select: unset;
/* Специфичные для Mozilla значения */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
/* Специфичные для WebKit значения */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /*Не работает Safari; используйте только
"none" или "text", или, в противном случае, оно
будет разрешать ввод в <html> контейнер */
/* Специфичные для Microsoft значения */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
</pre>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<dl>
<dt><code>none</code></dt>
<dd>Текст элемента и вложенных в него элементов не выбирается. Обратите внимание, что объект {{domxref("Selection")}} может содержать эти элементы.</dd>
<dt><code>auto</code></dt>
<dd>
<p>Вычисляемое значение, автоматически определяется следующим образом:</p>
<ul>
<li>Для псевдо-элементов <code>::before</code> и <code>::after</code> вычисляемое значение - <code>none</code></li>
<li>Если элемент является редактируемым, вычисляемое значение - <code>contain</code></li>
<li>Иначе, если вычисляемое значение <code>user-select</code> для родителя этого элемента - <code>all</code>, вычисляемое значение - <code>all</code></li>
<li>Иначе, если вычисляемое значение <code>user-select</code> для родителя этого элемента - <code>none</code>, вычисляемое значение - <code>none</code></li>
<li>Иначе, вычисляемое значение - <code>text</code></li>
</ul>
</dd>
<dt><code>text</code></dt>
<dd>Текст может быть выбран пользователем.</dd>
<dt><code>all</code></dt>
<dd>В HTML-редакторе, если двойной клик или контекстный клик произошёл во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.</dd>
<dt><code>contain</code></dt>
<dd>Позволяет начать выбор внутри элемента; однако, выбор будет содержаться внутри границ данного элемента.</dd>
<dt><code>element</code>{{non-standard_inline}} (IE-specific alias)</dt>
<dd>Аналогичен <code>contain</code>. Поддерживается только в Internet Explorer.</dd>
</dl>
<div class="note">
<p id="Formal_syntax"><strong>Примечание:</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">renames user-select: element to contain</a>.</p>
</div>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.unselectable {
-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;
}
</pre>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample("Примеры")}}</p>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<div>
<p>{{Compat("css.properties.user-select")}}</p>
</div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{Cssxref("::selection")}}</li>
<li>Объект JavaScript {{domxref("Selection")}}.</li>
<li><a href="http://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a> in <a href="http://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>.</li>
</ul>
|
