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 computed value of auto is determined as follows:

  • On the ::before and ::after pseudo elements, the computed value is none
  • If the element is an editable element, the computed value is contain
  • Otherwise, if the computed value of user-select on the parent of this element is all, the computed value is all
  • Otherwise, if the computed value of user-select on the parent of this element is none, the computed value is none
  • Otherwise, the computed value is text
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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

54

6 -webkit-

12 -ms-

12 -webkit-

Yes -moz-

49 -webkit-

44 -webkit- 1

1015 -webkit- 3.1 -webkit-
auto Yes12 Yes10 Yes Yes
all Yes12 Yes10 Yes Yes
none Yes12

21

Yes -moz-

10 Yes Yes
text Yes12 Yes10 Yes Yes2
contain No

12

123

No

Yes

103

No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support

54

6 -webkit-

54

18 -webkit-

12 -ms-

12 -webkit-

Yes -moz-

49 -webkit-

44 -webkit- 1

14 -webkit- 3.2 -webkit- 6.0 -webkit-
auto Yes Yes12 Yes Yes Yes Yes
all Yes Yes12 Yes Yes Yes Yes
none Yes Yes12

21

Yes -moz-

Yes Yes Yes
text Yes Yes12 Yes Yes Yes2 Yes
contain No No

12

123

No No No No

1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

2. Allows typing in the <html> container.

3. Supported as element.

See also