The user-select property in CSS is used to control whether users can highlight and select text on a webpage. You can use it to allow or prevent users from selecting certain text. For example, if you want to stop users from copying specific content, you can disable text selection.
On the other hand, you can also make sure that certain text is always selectable. This property is useful for controlling how users interact with text on your website.
Note: The double-click on some text will be selected/highlighted but this property can be used to prevent this.
Syntax
The user-select property uses the following syntax:
user-select: auto | none | text | all;
Default Value: auto
Property Values
| Value | Description |
|---|
auto | Default value. The user can select the text normally. |
none | Prevents text selection, meaning the user cannot select any text. |
text | Allows the user to select the text. |
all | Selects the entire text with a single mouse click, instead of requiring a double-click. |
CSS user-select Property - Examples
Below are some examples demonstrating how the user-select property works.
Example 1: Using user-select: auto
In this example, the user-select: auto property allows the text inside the div element to be selectable as per the default browser behavior.
html
<!DOCTYPE html>
<html>
<head>
<title>user-select property</title>
<style>
div {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>user-select:auto;</h3>
<div>
GeeksforGeeks:
A computer science portal for geeks
</div>
</body>
</html>
Output:
output
Example 2: Using user-select: none
In this example, the user-select: none property prevents the text inside the div element from being selected by the user.
html
<!DOCTYPE html>
<html>
<head>
<title>user-select property</title>
<style>
div {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>user-select:none;</h3>
<div>
GeeksforGeeks:
A computer science portal for geeks
</div>
</body>
</html>
Output:
output
Example 3: Using user-select: text
In this example, the user-select: text property ensures that the text inside the div element can be selected by the user.
html
<!DOCTYPE html>
<html>
<head>
<title>user-select property</title>
<style>
div {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>user-select:text;</h3>
<div>
GeeksforGeeks:
A computer science portal for geeks
</div>
</body>
</html>
Output:
output
Example 4: Using user-select: all
In this example, the user-select: all property allows the entire text inside the div element to be selected with a single mouse click, instead of requiring a double-click.
html
<!DOCTYPE html>
<html>
<head>
<title>user-select property</title>
<style>
div {
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>user-select:text;</h3>
<div>
GeeksforGeeks:
A computer science portal for geeks
</div>
</body>
</html>
Output:
output
Supported browsers
The browsers supported by user-select Property are listed below:
- Google Chrome
- Edge
- Firefox
- Opera
- Safari
Note: While the user-select property is widely supported, older versions of some browsers may require vendor prefixes (e.g., -webkit-, -moz-) for compatibility.
Conclusion
The user-select property in CSS is a useful tool for controlling text selection behavior on a webpage. By using values such as auto, none, text, and all, developers can enhance user experience and ensure text is selected or protected as needed. Understanding and utilizing the user-select property effectively can significantly improve the interactivity and security of your web content. Experiment with the provided examples to see how different values impact text selection and improve your CSS skills.