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:
| Value | Description |
|---|---|
none | The element's text and its child elements' text are not selectable. |
auto | The used value is determined based on the element's context, such as editable elements, parent elements, and pseudo-elements. |
text | The user can select the text. |
all | When selecting part of the element, the entire element, including descendants, is selected. |
contain | The selection starts within the element, but is limited to the element's bounds. |
Associated Properties
::selectionpseudo-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::beforeor::afterCSS 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
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | Yes* | Yes* | Yes* | Yes* | Yes* | Yes* |
Note: Specific information on prefix support can be found in the first link of the Useful Resources