Home »
CSS
The user-select Property in CSS
CSS | user-select Property: Here, we are going to learn about the user-select property with its syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on January 10, 2020
CSS | user-select Property
Description:
Astonishingly, web development provides us with a vast amount of features. From editing to styling, everything is covered to the core. Let us take this discussion further, by learning about one another such as feature or property known as user-select property in CSS.
The user-select property in CSS is a very fundamental yet crucial property when it comes to making a web page responsive. The property is used to specify whether or not a text of an element can be selected.
Generally, if you double-click on some text it will be selected or highlighted. This property can be used to prevent this.
Syntax:
Element{
user-select : auto|none|all|text;
}
user-select Property values
1) user-select : auto
auto is the default value of the user-select property. The core function of this property is that it helps the user select a particular text.
Syntax:
Element{
user-select:auto;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
user-select: auto;
}
</style>
</head>
<body>
<h1>The user-select Property</h1>
<div>Includehelp is a learning website.</div>
</body>
</html>
Output
In the above example, the text of div element can be selected.
2) user-select : none
none is another value of the user-select property. It is used to prevent text selection from the user which means that the user can’t select the text on its own when this value is active.
Syntax:
Element{
user-select:none;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
user-select: none;
}
</style>
</head>
<body>
<h1>The user-select Property</h1>
<div>Includehelp is a learning website.</div>
</body>
</html>
Output
In the above example, if you try you cannot select the text inside the div element.
3) user-select : all
all is another value of the user-select property. It is used to select the text with just one click of a mouse instead of a double-click.
Syntax:
Element{
user-select:all;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
user-select: all;
}
</style>
</head>
<body>
<h1>The user-select Property</h1>
<div>Includehelp is a learning website.</div>
</body>
</html>
Output
In the above example, you can select the text inside the div element in a single click only.
4) user-select : text
text is another value of the user-select property. It is used to enable the user to select the text. It is not used for providing prevent text selection from the user.
Syntax:
Element{
user-select:text;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
user-select: text;
}
</style>
</head>
<body>
<h1>The user-select Property</h1>
<div>Includehelp is a learning website.</div>
</body>
</html>
Output
In the above example, if you want to select the text in div element you can select it in a double click.
CSS Tutorial & Examples »