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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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.