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 value | auto |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the 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
Selectionobject can contain these elements. Starting with Firefox 21,nonebehaves 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
::beforeand::afterpseudo elements, the computed value isnone - If the element is an editable element, the computed value is
contain - Otherwise, if the computed value of
user-selecton the parent of this element isall, the computed value isall - Otherwise, if the computed value of
user-selecton the parent of this element isnone, the computed value isnone - Otherwise, the computed value is
text
- On the
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
Selectionobject can contain these elements. Selection can be re-enabled on sub-elements using-moz-user-select: text. Starting with Firefox 21,nonebehaves 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.
Note: CSS UI 4 renames user-select: element to contain.
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 | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 54 6 -webkit- | 12 -ms- 12 -webkit- | Yes -moz- 49 -webkit- | 10 | 15 -webkit- | 3.1 -webkit- |
auto | Yes | 12 | Yes | 10 | Yes | Yes |
all | Yes | 12 | Yes | 10 | Yes | Yes |
none | Yes | 12 | 21 Yes -moz- | 10 | Yes | Yes |
text | Yes | 12 | Yes | 10 | Yes | Yes2 |
contain | No | 12 123 | No | Yes 103 | No | No |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | 54 6 -webkit- | 54 18 -webkit- | 12 -ms- 12 -webkit- | Yes -moz- 49 -webkit- | 14 -webkit- | 3.2 -webkit- | 6.0 -webkit- |
auto | Yes | Yes | 12 | Yes | Yes | Yes | Yes |
all | Yes | Yes | 12 | Yes | Yes | Yes | Yes |
none | Yes | Yes | 12 | 21 Yes -moz- | Yes | Yes | Yes |
text | Yes | Yes | 12 | 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.