CSS user-select Property
The user-select property specifies whether or not the user can select text.
The default value is "auto" which is determined as follows:
- On the ::before and ::after pseudo elements, the computed value is "none"
- If the element is an editable element, the computed value is "contain",
- If the computed value of user-select on the parent of this element is "all", the computed value is "all".
- If the computed value of user-select on the parent of this element is "none", the computed value is "none",
- Otherwise, the computed value is "text".
INFO
Vendor prefixes (-webkit-, -moz-) are now obsolete in all modern browsers. The standard user-select property is fully supported without them.
| Initial Value | auto |
|---|---|
| Applies to | All elements, though some values have no effect on non-inline elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.userSelect = "text"; |
Syntax
CSS user-select values
css
user-select: auto | none | text | all | contain | initial | inherit;Example of the user-select property with the "auto" value:
CSS user-select code example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: auto;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>In the given example, text can be selected if the browser allows it.
Example of the user-select property with the "none" value:
CSS user-select example prefixes
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: none;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>The text cannot be selected.
Example of the user-select property with the "all" value:
CSS user-select all value example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: all;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Clicking anywhere in the element selects all the text within it.
Example of the user-select property with the "text" value:
CSS user-select text value example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: text;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Text can be selected normally by the user.
Values
| Value | Description | Play it |
|---|---|---|
| auto | Text can be selected if the browser allows it. This is the default value of this property. | Play it » |
| none | Text is not selected. | Play it » |
| text | Text is selected by the user. | Play it » |
| all | Text is selected by one click. | Play it » |
| contain | Text can be selected, but the selection cannot extend beyond the element's boundaries. Typically used for editable elements. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property from its parent element. |
Practice
Which statement is correct about CSS user-select property?