1. css
  2. /properties
  3. /user-select

user-select

Overview

The user-select property specifies how users can select text within an element. It offers options such as disabling text selection or permitting the selection of an entire element. Moreover, it finds usage in improving the user experience by optimizing the text selection process according to the content or design elements being used.

Examples and Usage

In the example below, the first paragraph has default text selection behavior, the second paragraph restricts text selection, and the third one enables the selection of the entire text content with a single click.

<p>The user can select this text</p>

<p class="no-select">This text cannot be selected</p>

<p class="select-all">Click once to select all this text</p>
body {
  font-family: Arial, sans-serif;
  font-size: 18px;
}

.no-select {
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer 10+ */
  user-select: none; /* The standard syntax*/

}

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

Note: The property has quirks in its behavior, and relies on vendor prefixes depending on the browser being used. More information on the specifics can be found in the sections below.

Values

The user-select property accepts the following values:

ValueDescription
noneThe element's text and its child elements' text are not selectable.
autoThe used value is determined based on the element's context, such as editable elements, parent elements, and pseudo-elements.
textThe user can select the text.
allWhen selecting part of the element, the entire element, including descendants, is selected.
containThe selection starts within the element, but is limited to the element's bounds.

Associated Properties

  • ::selection pseudo-element

Tips and Tricks

  • Use user-select: none; for elements where text selection isn't necessary, like buttons or icons.

  • To achieve the same effect, you can place text within the content: ''; property of a ::before or ::after CSS pseudo-element.

  • Keep in mind that preventing text selection may impact the user experience for certain users, such as those using assistive technologies.

Browser Compatibility

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer
SupportYes*Yes*Yes*Yes*Yes*Yes*

Note: Specific information on prefix support can be found in the first link of the Useful Resources

Useful Resources

Can I use - user-select

W3C Working Draft - user-select

Chrome Status on Prefix Support