CSS user-select Property

The user-select property specifies whether or not the user can select text.

The default value is "auto" which 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",
  • If the computed value of user-select on the parent of this element is "all", the computed value is "all".
  • 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".

For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox are used with this property.
Initial Value auto
Applies to All elements, though some values have no effect on non-inline elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.userSelect = "text";

Syntax

user-select: auto | none | text | all | contain | initial | inherit;

Example of the user-select property with the "auto" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      -webkit-user-select: auto; /* Safari 3.1+ */
      -moz-user-select: auto; /* Firefox 2+ */
      user-select: auto; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>

In the given example, the text cannot be selected.

Example of the user-select property with the "none" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      -webkit-user-select: none; /* Safari 3.1+ */
      -moz-user-select: none; /* Firefox 2+ */
      user-select: none; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>

The text is selected by one click instead of double-click.

Example of the user-select property with the "all" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      -webkit-user-select: all; /* Safari 3.1+ */
      -moz-user-select: all; /* Firefox 2+ */
      user-select: all; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>

In the following example, you can select any part of the text you want.

Example of the user-select property with the "text" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      -webkit-user-select: text; /* Safari 3.1+ */
      -moz-user-select: text; /* Firefox 2+ */
      user-select: text; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>User-select property example</h2>
    <div>Lorem ipsum is simply dummy text.</div>
  </body>
</html>

Values

Value Description Play it
auto Text can be selected if the browser allows it. This is the default value of this property. Play it »
none Text is not selected. Play it »
text Text is selected by the user. Play it »
all Text is selected by one click. Play it »
contain When the element is an editable. Play it »
initial Sets the property to its default value. Play it »
inherit Inherits the property from its parent element.

Browser support

54.0+
4.0 - 53.0 -webkit-
12.0 -ms- 2.0 -moz- 3.1 -webkit- 41.0+
15.0 - 40.0 -webkit-

Practice Your Knowledge

Which statement is correct about CSS user-select property?



Do you find this helpful?

Related articles