user-select
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”.
For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox are used with this property.
| 类目 | 类目 |
|---|---|
| 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
Syntax
user-select: auto | none | text | all | contain | initial | inherit;
Example of the user-select property with the “auto” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-user-select: auto;/* Safari 3.1+ */
-moz-user-select: auto;/* Firefox 2+ */
user-select: auto;/* Standard syntax */
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>
In the given example, the text cannot be selected.
Example of the user-select property with the “none” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-user-select: none;/* Safari 3.1+ */
-moz-user-select: none;/* Firefox 2+ */
user-select: none;/* Standard syntax */
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>
The text is selected by one click instead of double-click.
Example of the user-select property with the “all” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-user-select: all;/* Safari 3.1+ */
-moz-user-select: all;/* Firefox 2+ */
user-select: all;/* Standard syntax */
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>
In the following example, you can select any part of the text you want.
Example of the user-select property with the “text” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-user-select: text;/* Safari 3.1+ */
-moz-user-select: text;/* Firefox 2+ */
user-select: text;/* Standard syntax */
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>
Values
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 | When the element is an editable. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property from its parent element. |