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 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.
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 (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
6.0-webkit- |
(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.