---
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", или, в противном случае, оно
                             будет разрешать ввод в &lt;html&gt; контейнер */

/* Специфичные для 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">&lt;p&gt;You should be able to select this text.&lt;/p&gt;
&lt;p class="unselectable"&gt;Hey, you can't select this text!&lt;/p&gt;
&lt;p class="all"&gt;Clicking once will select all of this text.&lt;/p&gt;
</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>