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

chrome firefox safari opera
54.0+
4.0 - 53.0 -webkit-
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?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?