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 |