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
Selection
object can contain these elements. auto
-
The computed value of auto is determined as follows:
- On the
::before
and::after
pseudo elements, the computed value isnone
- 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 isall
, the computed value isall
- Otherwise, if the computed value of
user-select
on 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
Selection
object. - user-select in CSS Basic User Interface Module Level 4.