user-select

  • Revision slug: CSS/user-select
  • Revision title: user-select
  • Revision id: 328607
  • Created:
  • Creator: 6quityxy25
  • Is current revision? No
  • Comment

Revision Content

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.

none
The text of the element and sub-elements will appear as if they cannot be selected. Any use of Selection however will contain these elements. 
text
The text can be selected by the user.
-moz-none {{ not_standard_inline() }}
The text of the element and sub-elements cannot be selected, but selection can be enabled on sub-elements using -moz-user-select:text .
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

<style>
  .selectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
</style>
<body>
  <p class="selectable">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 (Website)
Basic support 1 {{ Compartmentalization() }} 10 - {{ Compartmentalization() }}
Element {{ property_prefix("-website") }} {{ property_prefix("-moz") }} {{ property_prefix("-ms") }} &tbsp; {{ property_prefix("-website") }}
Feature Android Firefox Mobile (Gecko) IE&tbsp;Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

{{ languages( { "ed": "de/CSS/-moz-user-select" } ) }}

Revision Source

<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>
<dl>
  <dt>
    <code>none</code></dt>
  <dd>
    The text of the element and sub-elements will appear as if they cannot be selected. Any use of <a class="internal" href="/en/DOM/Selection" title="En/DOM/Selection">Selection</a> however will contain these elements.&nbsp;</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 cannot be selected, but selection can be enabled on sub-elements using<code> -moz-user-select:text </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>
<div class="note">
  <pre class="brush: html">
&lt;style&gt;
  .selectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
&lt;/style&gt;
&lt;body&gt;
  &lt;p class="selectable"&gt;The user is not able to select this text in Firefox, Chrome, Safari, and IE.&lt;/p&gt;
&lt;/body&gt;</pre>
</div>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compact-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (Website)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1</td>
        <td>{{ Compartmentalization() }}</td>
        <td>10</td>
        <td>-</td>
        <td>{{ Compartmentalization() }}</td>
      </tr>
      <tr>
        <td>Element</td>
        <td>{{ property_prefix("-website") }}</td>
        <td>{{ property_prefix("-moz") }}</td>
        <td>{{ property_prefix("-ms") }}</td>
        <td>&amp;tbsp;</td>
        <td>{{ property_prefix("-website") }}</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&amp;tbsp;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>,&amp;tbsp;{{ 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>
<p>{{ languages( { "ed": "de/CSS/-moz-user-select" } ) }}</p>
Revert to this revision