{{CSSRef}}{{SeeCompatTable}}
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.
{{cssinfo}}
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; -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
none
behaves like-moz-none
, so selection can be re-enabled on sub-elements using-moz-user-select:text
. text
- The text can be selected by the user.
-moz-none
{{non-standard_inline}}- 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 21none
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
{{non-standard_inline}} (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 |
---|---|---|
{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}} | {{Spec2('CSS4 UI')}} | Initial definition. Also defined -webkit-user-select as a deprecated alias of user-select . |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | {{CompatChrome(6.0)}}{{property_prefix("-webkit-")}} | {{CompatVersionUnknown}}{{property_prefix("-ms-")}}{{property_prefix("-webkit-")}} | {{CompatVersionUnknown}}{{property_prefix("-moz-")}} | {{Compatie(10)}}{{property_prefix("-ms-")}} | {{CompatOpera(15.0)}}{{property_prefix("-webkit-")}} | {{CompatSafari(3.1)}}{{property_prefix("-webkit-")}} |
element |
{{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatAndroid(2.1)}} | {{CompatUnknown}} | 10{{CompatVersionUnknown}}{{property_prefix("-ms-")}} 11{{property_prefix("-webkit-")}} |
{{CompatNo}} | 3.2{{CompatVersionUnknown}} |
element |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
See also
- {{Cssxref("::selection")}}
- Safari
-webkit-user-select
reference documentation - IE 10 Blog post
- user-select in CSS Basic User Interface Module Level 4.