Open In App

CSS user-select Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output: 

Supported browsers: The browsers supported by user-select Property are listed below: 

  • Google Chrome
  • Edge
  • Firefox
  • Opera
  • Safari


Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads