CSS user-select Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The user-select CSS property controls whether the user can select text. It can be used to disable text selection on certain elements of a web page, such as headings, images, or buttons. This can be useful for preventing users from accidentally highlighting or copying text that is not meant to be interactive.

Initial value
auto
Applies to
all elements
Inherited
no
Computed value
as specified
Animatable
discrete
JavaScript syntax
object.style.userSelect

Interactive Demo

User Select Demo

This text is always selectable

This text is not always selectable depending

Syntax

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

Values

  • noneText cannot be selected by the user.
  • autoThe default value. Text can be selected by the user.
  • textText can be selected by the user, but only within the element.
  • allText can be selected by the user, including text within other elements.
  • containText can be selected by the user, but only within the element and its descendants.

Example

<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>
.unselectable {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

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

Browser Support

The following table will show you the current browser support for the CSS user-select property.

Desktop
Edge Chrome Firefox Opera Safari
795469413
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
5479413654

Last updated by CSSPortal on: 2nd January 2024