Revision 1041610 of user-select

<div>{{not_standard}}{{CSSRef}}</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 'user-focus' 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. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers.</p>
</div>

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

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

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

-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: all;
-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>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>element</code></dt>
 <dd>Supported only in Internet Explorer. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.</dd>
</dl>

<div class="note" id="not-spec"><strong>Note:</strong> <code>user-select</code> is not currently part of any W3C CSS specification. As such, there are minor differences between the browser implementations. Be sure to test your application across browsers.</div>

<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">
none | text | all | element</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="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>