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”.

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>

My Blog