Revision 1059970 of user-select

<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>Controls the actual <a href="/en-US/docs/DOM/Selection">Selection</a> operation. This doesn't have any effect on content loaded as chrome, except in textboxes. A similar property <code>user-focus</code> was proposed in <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">early drafts of a predecessor of css3-ui</a> but was rejected by the working group.</p>

<div class="note">
<p><strong>Note: </strong>Check the <a href="#Browser_compatibility">compatibility table</a> for the proper prefixes to use in various browsers.</p>
</div>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* does not work in Safari, use only "none" or "text", or else it will allow to type in the html container*/

-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
</pre>

<dl>
 <dt><code>none</code></dt>
 <dd>The text of the element and sub-elements will not be able to be selected. <a href="/en-US/docs/Web/API/Selection">Selection</a> can contain these elements. Starting with Firefox 21 <code>none</code> behaves like <code>-moz-none</code>, so selection can be re-enabled on sub-elements using <code>-moz-user-select:text</code>.</dd>
 <dt><code>auto</code></dt>
 <dd>The text will be selected according to the browser's default properties.</dd>
 <dt><code>text</code></dt>
 <dd>The text can be selected by the user.</dd>
 <dt><code>-moz-none</code> {{non-standard_inline}}</dt>
 <dd>The text of the element and sub-elements will appear as if they cannot be selected. <a href="/en-US/docs/Web/API/Selection">Selection</a> can contain these elements. Selection can be re-enabled on sub-elements using <code>-moz-user-select:text</code>. Starting with Firefox 21 <code>none</code> behaves like <code>-moz-none</code>.</dd>
 <dt><code>all</code></dt>
 <dd>In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.</dd>
 <dt><code>contain</code><br />
 <code>element</code>{{non-standard_inline}} (IE-specific alias)</dt>
 <dd>Enables selection to start within the element; however, the selection will be contained by the bounds of that element. Supported only in Internet Explorer.</dd>
</dl>

<div class="note">
<p><strong>Note:</strong> One of the differences between browser implementations is inheritance. In Firefox, -moz-user-select is not inherited by absolutely positioned elements, but in Safari and Chrome, -webkit-user-select is inherited by those elements.</p>
</div>

<div class="note">
<p id="Formal_syntax"><strong>Note:</strong>&nbsp;CSS UI 4&nbsp;<a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">rename user-select: element to contain</a>.</p>
</div>

<pre class="syntaxbox">
auto | text | none | contain | all</pre>

<h2 id="Examples">Examples</h2>

<pre class="brush: css">
.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
</pre>

<pre class="brush: html">
&lt;body&gt;
  &lt;p class="unselectable"&gt;The user is not able to select this text in Firefox, Chrome, Safari and IE.&lt;/p&gt;
&lt;/body&gt;
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
   <td>{{Spec2('CSS4 UI')}}</td>
   <td>Initial definition. Also defined <code>-webkit-user-select</code> as a deprecated alias of <code>user-select</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(6.0)}}{{property_prefix("-webkit-")}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-ms-")}}{{property_prefix("-webkit-")}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-moz-")}}</td>
   <td>{{Compatie(10)}}{{property_prefix("-ms-")}}</td>
   <td>{{CompatOpera(15.0)}}{{property_prefix("-webkit-")}}</td>
   <td>{{CompatSafari(3.1)}}{{property_prefix("-webkit-")}}</td>
  </tr>
  <tr>
   <td><code>element</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatAndroid(2.1)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>10{{CompatVersionUnknown}}{{property_prefix("-ms-")}}<br />
    <a href="https://msdn.microsoft.com/en-us/library/ie/hh781492(v=vs.85).aspx">11</a>{{property_prefix("-webkit-")}}</td>
   <td>{{CompatNo}}</td>
   <td>3.2{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>element</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{Cssxref("::selection")}}</li>
 <li>Safari <a href="https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-user-select"><code>-webkit-user-select</code> reference documentation</a></li>
 <li><a href="https://blogs.msdn.com/b/ie/archive/2012/01/11/controlling-selection-with-css-user-select.aspx">IE 10 Blog post</a></li>
 <li><a href="https://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a> in <a href="https://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>.</li>
</ul>