user-select CSS property

Try it

user-select: none;

user-select: text;

user-select: all;

<section id="default-example">
  <p id="example-element">Try to select this text</p>
</section>

#example-element {
  font-size: 1.5rem;
}

Syntax

/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: all;

/* Global values */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;

Values

none

The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.

auto

The used value of auto is determined as follows:

• On the ::before and ::after pseudo elements, the used value is none
• If the used value of user-select on the parent of this element is none, the used value is none
• Otherwise, if the used value of user-select on the parent of this element is all, the used value is all
• Otherwise, the used value is text

text

The text can be selected by the user.

all

The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.

Formal definition

Formal syntax

user-select = 
  auto     |
  text     |
  none     |
  contain  |
  all      

Examples

HTML

<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>

CSS

.unselectable {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

.all {
  -webkit-user-select: all;
  user-select: all;
}

Result

Specifications

Browser compatibility

See also

• ::selection pseudo-element
• The JavaScript Selection object