This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Controls the actual Selection operation. This doesn't have any effect on content loaded as chrome, except in textboxes. A similar property user-focus was proposed in early drafts of a predecessor of css3-ui but was rejected by the working group.
Note: Check the compatibility table for the proper prefixes to use in various browsers.
| 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
user-select: none; user-select: auto; user-select: text; user-select: contain; user-select: all; -moz-user-select: none; -moz-user-select: text; -moz-user-select: all; -webkit-user-select: none; -webkit-user-select: text; -webkit-user-select: all; /* does not work in Safari, use only "none" or "text", or else it will allow to type in the html container*/ -ms-user-select: none; -ms-user-select: text; -ms-user-select: element;
none- The text of the element and sub-elements will not be able to be selected. Selection 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 text will be selected according to 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. Selection can contain these elements. Selection can be re-enabled on sub-elements using
-moz-user-select:text. Starting with Firefox 21nonebehaves 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 rename user-select: element to contain.
auto | text | none | contain | all
Examples
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
<body> <p class="unselectable">The user is not able to select this text in Firefox, Chrome, Safari and IE.</p> </body>
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Basic User Interface Module Level 4 The definition of 'user-select' in that specification. |
Working Draft | Initial definition. Also defined -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.