user-select

  • Revision slug: CSS/user-select
  • Revision title: user-select
  • Revision id: 349815
  • Created:
  • Creator: cpeterson
  • Is current revision? No
  • Comment

Revision Content

{{not_standard}}{{CSSRef}}

Controls the appearance (only) of selection.  This does not have any affect on actual selection operation. This doesn't have any effect on content loaded as chrome, except in textboxes. A similar property 'user-focus' was proposed in early drafts of a predecessor of css3-ui but was rejected by the working group.$

Formal syntax: none | text | all | element
user-select: none;
user-select: text;
user-select: all;
user-select: element;
none
The text of the element and sub-elements will appear as if they cannot be selected. Selection can contain these elements. Starting with Firefox 21 none behaves like -moz-none, so selection can be re-enabled on sub-elements using -moz-user-select:text.
text
The text can be selected by the user.
-moz-none {{ not_standard_inline() }}
The text of the element and sub-elements will appear as if they cannot be selected. Selection can contain these elements. Selection can be re-enabled on sub-elements using -moz-user-select:text. Starting with Firefox 21 none behaves like -moz-none.
all
In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
element
Supported in Firefox and Internet Explorer. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.
Note: user-select 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.

Examples

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
<body>
  <p class="unselectable">The user is not able to select this text in Firefox, Chrome, Safari and IE.</p>

</body>

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 {{ CompatVersionUnknown() }} 10 - {{ CompatVersionUnknown() }}
Element {{CompatNo}} {{ property_prefix("-moz") }} {{ property_prefix("-ms") }}   {{CompatNo}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

Revision Source

<div>
  {{not_standard}}{{CSSRef}}</div>
<p>Controls the appearance (only)&nbsp;of selection.&nbsp; This does not have any affect on actual selection operation. This doesn't have any effect on content loaded as chrome, except in textboxes. A similar property 'user-focus' was proposed in <a class="external" href="http://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>
<pre class="cleared twopartsyntaxbox">
Formal syntax: none | text | all | element</pre>
<pre>
user-select: none;
user-select: text;
user-select: all;
user-select: element;</pre>
<dl>
  <dt>
    <code>none</code></dt>
  <dd>
    The text of the element and sub-elements will appear as if they cannot be selected. <a class="internal" href="/en/DOM/Selection" title="En/DOM/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> {{ not_standard_inline() }}</dt>
  <dd>
    The text of the element and sub-elements will appear as if they cannot be selected. <a class="internal" href="/en/DOM/Selection" title="En/DOM/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 in Firefox and 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">
  <strong>Note:</strong>&nbsp;<code>user-select</code>&nbsp;is not currently part of any W3C CSS specification.&nbsp;As such, there are minor differences between the browser implementations. Be sure to test your application across browsers.</div>
<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>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>10</td>
        <td>-</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td>Element</td>
        <td>{{CompatNo}}</td>
        <td>{{ property_prefix("-moz") }}</td>
        <td>{{ property_prefix("-ms") }}</td>
        <td>&nbsp;</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&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="See_also" name="See_also">See also</h3>
<ul>
  <li><a class="internal" href="/En/CSS/::selection" title="En/CSS/::selection"><code>::-moz-selection</code></a>,&nbsp;{{ Cssxref("::selection") }}</li>
  <li>Safari <a class="external" href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-user-select" title="http://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 class="external" href="http://blogs.msdn.com/b/ie/archive/2012/01/11/controlling-selection-with-css-user-select.aspx" title="http://blogs.msdn.com/b/ie/archive/2012/01/11/controlling-selection-with-css-user-select.aspx">IE 10 Blog post</a></li>
</ul>
Revert to this revision