MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The user-select CSS property controls whether the user can select text. This doesn't have any effect on content loaded as chrome, except in textboxes.

/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/* Global values */
user-select: inherit;
user-select: initial;
user-select: unset;

/* Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

/* WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* Doesn't work in Safari; use only
                             "none" or "text", or else it will
                             allow typing in the <html> container */

/* Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;

Note: This property correlates to the JavaScript Selection object.

Note: Many browsers still require a prefix to use this property. Check the compatibility table below.

Initial valueauto
Applies toall elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

none
The text of the element and its sub-elements is not selectable. Note that the Selection object 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.
auto
The text can be selected if allowed by the browser's default properties.
text
The text can be selected by the user.
-moz-none
The text of the element and sub-elements will appear as if they cannot be selected. Note that the Selection object 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.
contain
element (IE-specific alias)
Enables selection to start within the element; however, the selection will be contained by the bounds of that element. Supported only in Internet Explorer.

Note: 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.

auto | text | none | contain | all

Example

HTML

<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>

CSS

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Result

Specifications

Specification Status Comment
CSS Basic User Interface Module Level 4
The definition of 'user-select' in that specification.
Working Draft Initial definition. Also defines -webkit-user-select as a deprecated alias of user-select.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support

6.0-webkit-
54.0

(Yes)-ms-webkit (Yes)-moz[1] 10-ms 15.0-webkit 3.1-webkit
element No support (Yes) No support (Yes) ? No support
contain No support[3] ? No support ? No support[3] No support
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support 2.1 54.0 (Yes)-ms-webkit ? 10-ms
11-webkit[2]
No support 3.2(Yes) 54.0
element ? No support (Yes) ? ? ? No support No support
contain No support[3] No support[3] ? No support ? ? No support No support[3]

[1] In addition to the -moz prefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] See documentation on MSDN.

[3] Chromium bug.

Note: A similar property, user-focus, was proposed in early drafts of a predecessor of css3-ui, but was rejected by the working group.

See also