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

CSS Properties

user-select

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>

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

References

• user-select (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/user-select