CSS user-select Property
Example
Prevent text selection of a <div> element:
div
{
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
Try it Yourself »
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
Definition and Usage
The user-select property specifies whether the text of an element can be selected.
In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.userSelect="none" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| user-select | 54.0 | 79.0 | 69.0 | 3.1 -webkit- | 41.0 |
CSS Syntax
user-select: auto|none|text|all;
Property Values
| Value | Description | Demo |
|---|---|---|
| auto | Default. Text can be selected if the browser allows it | Play it » |
| none | Prevent text selection | Play it » |
| text | The text can be selected by the user | Play it » |
| all | Text selection is made with one click instead of a double-click | Play it » |
Related Pages
HTML DOM reference: userSelect property