Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS user-select

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'.

Example

#

The text below cannot be selected or highlighted.

This text cannot be selected.
<style>
  .no-select {
    user-select: none;
  }
</style>

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

Syntax

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

Values

#

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.

More Examples

Click the buttons to see the different user-select values.
Notice that with all the entire line is selected with a single click.

Try selecting this text with single, double, and triple clicks
<style>
  .user-select {
    user-select: all;
  }
</style>

<div class="user-select">
  Try selecting this text with 
  single, double, and triple clicks
</div> 

Browser support

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

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides