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;
| 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. 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.
all- The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
contain- Enables selection to start within the element; however, the selection will be contained by the bounds of that element.
element(IE-specific alias)- Same as
contain. Supported only in Internet Explorer.
Note: CSS UI 4 renames user-select: element to contain.
Formal syntax
auto | text | none | contain | all
Examples
HTML
<p>You should be able to select this text.</p> <p class="unselectable">Hey, you can't select this text!</p> <p class="all">Clicking once will select all of this text.</p>
CSS
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.all {
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
user-select: all;
}
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
user-select | Chrome
Full support
54
| Edge
Full support
12
| Firefox
Full support
69
| IE
Full support
10
| Opera
Full support
15
| Safari
Full support
3
| WebView Android
Full support
54
| Chrome Android
Full support
54
| Firefox Android
Full support
4
| Opera Android
Full support
14
| Safari iOS
Full support
3
| Samsung Internet Android
Full support
1.0
|
all | Chrome Full support 53 | Edge No support No | Firefox Full support 1 | IE No support No | Opera Full support 40 | Safari No support No | WebView Android Full support 53 | Chrome Android Full support 53 | Firefox Android Full support 4 | Opera Android Full support 41 | Safari iOS No support No | Samsung Internet Android Full support 6.0 |
auto | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 10 | Opera Full support 15 | Safari Full support 2 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
contain | Chrome No support No | Edge
Full support
12
| Firefox No support No | IE
Full support
10
| Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
none | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
21
| IE Full support 10 | Opera Full support 15 | Safari Full support 2 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android
Full support
21
| Opera Android Full support 14 | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
text | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 10 | Opera Full support 15 | Safari
Partial support
2
| WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS
Partial support
3
| Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
::selection- The JavaScript
Selectionobject. - user-select in CSS Basic User Interface Module Level 4.