W3cubDocs

/CSS

-ms-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;

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 computed value of auto is determined as follows:

On the ::before and ::after pseudo elements, the computed value is none
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 is all, the computed value is all
Otherwise, if the computed value of user-select on the parent of this element is none, the computed value is none
Otherwise, the computed value is text

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.

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>

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 compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	54 54 6 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	12 Prefixed 12 Prefixed Prefixed Implemented with the vendor prefix: -ms- 12 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Yes Prefixed Yes Prefixed Prefixed Implemented with the vendor prefix: -moz- 49 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 44 Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	10	15 Prefixed 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	3.1 Prefixed 3.1 Prefixed Prefixed Implemented with the vendor prefix: -webkit-
`auto`	Yes	12	Yes	10	Yes	Yes
`all`	Yes	12	Yes	10	Yes	Yes
`none`	Yes	12	21 21 Yes Prefixed Prefixed Implemented with the vendor prefix: -moz-	10	Yes	Yes
`text`	Yes	12	Yes	10	Yes	Partial Partial Allows typing in the `<html>` container.
`contain`	No	12 12 12 Uses the non-standard name: `element`	No	Yes Yes 10 Uses the non-standard name: `element`	No	No

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	54 54 Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-	54 54 18 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	12 Prefixed 12 Prefixed Prefixed Implemented with the vendor prefix: -ms- 12 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Yes Prefixed Yes Prefixed Prefixed Implemented with the vendor prefix: -moz- 49 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 44 Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	14 Prefixed 14 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	3.2 Prefixed 3.2 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	6.0 Prefixed 6.0 Prefixed Prefixed Implemented with the vendor prefix: -webkit-
`auto`	Yes	Yes	12	Yes	Yes	Yes	Yes
`all`	Yes	Yes	12	Yes	Yes	Yes	Yes
`none`	Yes	Yes	12	21 21 Yes Prefixed Prefixed Implemented with the vendor prefix: -moz-	Yes	Yes	Yes
`text`	Yes	Yes	12	Yes	Yes	Partial Partial Allows typing in the `<html>` container.	Yes
`contain`	No	No	12 12 12 Uses the non-standard name: `element`	No	No	No	No