W3cubDocs

/CSS

user-select

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- 54.0	(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.

user-select

Syntax

Example

HTML

CSS

Result

Specifications

Browser compatibility

See also