CSS user select property

CSS user-select property tells a user which elements can be selected or how to select. This property can disable selection of the whole text or specific portions of the text.

Example

<style>
div {
user-select:none;
}
</style>

Try </>

The none value disables the selection of the text for div element.

Value

There are many values of the user-select property that can disable or enable the selection of some elements.

user-select= text | none | contain | all | auto

1. text

text value does not apply any restriction to the selection of text. And a user can select the text freely.

Example

<style>
div{
user-select:text;
}
</style>

Try </>

2. none

none value does not allow a user to select the text i.e. it disables the selection of text.

Example

<style>
div{
user-select:none;
}
</style>

Try </>

Click on the 'try' button to see the example.

Try to select the text within div in the above given example, it can not be selected.

3. contain

This allows the selection of content present in the current element but the selection should not be extended outside the boundaries of this element.

Example

<style>
textarea{
user-select:contain;
}
</style>

Try </>

contain value is not supported on most browsers. But it can be observed on editable textarea element.

4. all

If a user selects a part of content of the current element, this selection must include all of the remaining content including the descendant elements (atomically).

Example

<style>
div{
user-select:all;
}
</style>

If a user selects a part of the text within div element, all of the remaining content within div element is selected including its descendants.

This selection includes all of the content such as text, videos, tables, images. But the preservation of this selection while copying and pasting is out of the scope of user-select property.

5. auto

If auto is the value of user-select for the current element, it is computed to any of the above given values such as none, all, text. The computation of this value depends on the the user-select values of parent element.

The following three cases compute to different values.

Case 1: If the current element is some pseudo element (:before, :after), it computes to 'none'.

Example

<style>
div p:before{
user-select:auto;
}
</style>

Try </>

Case 2: If the current element is editable, the computed value is 'contain'. See the following example to understand.

Example

<style>
textarea{
user-select:auto;
}
</style>

Try </>

Case 3: If the value of parent element is all or none, it is computed to all or none respectively. See the following example.

Example

<style>
div{
user-select:none;
}
div > p{
user-select:auto;	
}
</style>

Try </>

In the above given example, the computed value for the child element p is 'none'.

If none of the above values is found, the computed value is text.

auto is the default value of user-select property.

Browser support

There are browser compatibility issues for this property. Use the following prefixes for the relevant browssers. For example, use -webkit-user-select to avoid browser compatibility issues.

Browsers
content	✓	-webkit-	-ms-	-o-	-moz-

<style>
-webkit-user-select:rotate 2s 1;
-moz-user-select: rotate 2s 1;
-ms-user-select: rotate 2s 1;
-o-user-select: rotate 2s 1;
user-select: rotate 2s 1;
</style>