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), -ms- for Internet Explorer, -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

<!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+ */
      -ms-user-select: auto; /* IE 10+ */
      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

<!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+ */
      -ms-user-select: none; /* IE 10+ */
      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

<!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+ */
      -ms-user-select: all; /* IE 10+ */
      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

<!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+ */
      -ms-user-select: text; /* IE 10+ */
      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
auto Text can be selected if the browser allows it. This is the default value of this property.
none Text is not selected.
text Text is selected by the user.
all Text is selected by one click.
contain When the element is an editable.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.


Practice Your Knowledge

Which statement is correct about CSS user-select property?




Related articles