CSS user-select Property
Description
The user-select
CSS property controls whether the user can select text. It can be used to disable text selection on certain elements of a web page, such as headings, images, or buttons. This can be useful for preventing users from accidentally highlighting or copying text that is not meant to be interactive.
- Initial value
- auto
- Applies to
- all elements
- Inherited
- no
- Computed value
- as specified
- Animatable
- discrete
- JavaScript syntax
- object.style.userSelect
Interactive Demo
User Select Demo
This text is always selectable
This text is not always selectable depending
Syntax
user-select: none | auto | text | all | contain
Values
- noneText cannot be selected by the user.
- autoThe default value. Text can be selected by the user.
- textText can be selected by the user, but only within the element.
- allText can be selected by the user, including text within other elements.
- containText can be selected by the user, but only within the element and its descendants.
Example
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
.unselectable {
-webkit-user-select: none; /* Safari */
user-select: none;
}
.all {
-webkit-user-select: all;
user-select: all;
}
Browser Support
The following table will show you the current browser support for the CSS user-select
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
79 | 54 | 69 | 41 | 3 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
54 | 79 | 41 | 3 | 6 | 54 |
Last updated by CSSPortal on: 2nd January 2024