CSS user-select Property

This property is used to specify whether the text can be selected by the user or not.

Note: The double-click on some text will be selected/highlighted but this property can be used to prevent this.

Syntax:

user-select: auto|none|text|all;

Default Value: auto

Property value:

auto: It has the default value i.e. the user can select the text.
none: It is used to prevent text selection from the user means the user can’t select the text on its own.
text: This property enables the user to select the text. It does not provide prevent text selection from the user.
all: It is used to select the text with just one click of a mouse instead of a double-click.

Example: In this example, we are using user-select: auto property.

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:

Example: In this example, we are using user-select: none property.

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:

Example: In this example, we are using the user-select:text property.

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:

Example: In this example, we are using user-select: all property.

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>