User Select

The user-select property controls whether the user can select text.

Basic Concepts

The behavior for user-select: auto is as follows:

On the ::before and ::after pseudo elements, the used value is none
If the element is an editable element (e.g. <input>), the used value is contain
Otherwise, if the user-select value of the parent is all, the used value is all
Otherwise, if the user-select value of the parent is none, the used value is none
Otherwise, the used value is text

Controls whether the user can select text.

auto — use default behavior (see above)
none — the text of the element and its children is not selectable
text — the text can be selected
all — when selecting the text, select ALL of the element's text
contain — the text can be selected, but the selection will be contained by the bounds of that element

<div id="user-select-example">
  Select all text automatically!
</div>

<div id="user-select-example">
  Select all text automatically!
</div>

#user-select-example {
  user-select: all;
}

#user-select-example {
  user-select: all;
}

| LIVE PREVIEW

Select all text automatically!