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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
---
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("Examples")}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарии</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
<td>{{Spec2('CSS4 UI')}}</td>
<td>Первое определение. Также определение <code>-webkit-user-select</code> как устаревшего псевдонима <code>user-select</code>.</td>
</tr>
</tbody>
</table>
<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>
|
