The user-select property sets whether text can be selected.
This setting has no effect on the appearance of the element.
Users commonly select and highlight text. Text that prevents this feels 'dead'.
The text below cannot be selected or highlighted.
<style>
.no-select {
user-select: none;
}
</style>
<div class="no-select">
This text cannot be selected.
</div>
user-select: auto | none | text | all;
| Value | Description |
|---|---|
| auto | Default. Enables text selection as decided by the browser. |
| none | Disables text selection. |
| text | Enables text selection. |
| all | A single click will select the entire text. |
Click the buttons to see the different user-select values.
Notice that with all the entire line is selected with a single click.
<style>
.user-select {
user-select: all;
}
</style>
<div class="user-select">
Try selecting this text with
single, double, and triple clicks
</div>
This table shows when user-select support started for each browser.
 Chrome
|
54.0 | Oct 2016 |
 Firefox
|
2.0 | Oct 2006 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
41.0 | Oct 2016 |
 Safari
|
3.1 | Mar 2008 |
