Aquileo | HTML | DOM Style userSelect Property

The DOM Style UserSelect Property is used to set or return whether the text can be selected by the user or not.

Syntax:

It is used to return the property:

object.style.userSelect

It is used to set the property:

object.style.userSelect = "auto|none|text|all"

Properties :

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 user can’t select the text on its own.
text: This property enable the user to select the text. It does not provide prevent text selection from the user.
all: It is used to selected the text with just one-click of a mouse instead of a double-click.

Return Values: It returns a string value which represents whether the text of an element can be selected.
Example-1:

html

<!DOCTYPE html>
<html>

<head>
    <title> DOM Style 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;
            font-size: 30px;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>DOM Style UserSelect Property</h3>
    <div id="GFG">GeeksforGeeks:
      A computer science portal for geeks</div>
    <br>
  
    <button onclick="myGeeks()">Submit</button>
  
    <script>
        function myGeeks() {
            var x = document.getElementById("GFG");
          
            // Chrome, Safari, Opera
            x.style.WebkitUserSelect = "none"; 
          
            // Firefox
            x.style.MozUserSelect = "none";
          
            // IE 10+
            x.style.msUserSelect = "none"; 
          
            // Standard syntax
            x.style.userSelect = "none";
        }
    </script>
</body>

</html>

Output :

Before Clicking On Button:

After Clicking On Button:

Example-2:

html

<!DOCTYPE html>
<html>

<head>
    <title> DOM Style user-select property</title>
    <style>
        h1,
        h3 {
            color: green;
            font-size: 30px;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>DOM Style UserSelect Property</h3>
    <div id="GFG" style="user-select:auto;">
        GeeksforGeeks: A computer science portal for geeks
    </div>
    <br>

    <button onclick="myGeeks()">Submit</button>
    <script>
        function myGeeks() {
            alert(document.getElementById(
              "GFG").style.userSelect);
        }
    </script>
</body>

</html>

Output:

Before Clicking On Button:

After Clicking On Button:

Note: The double-click on some text will be selected/highlighted but this property can be used to prevent this.
Supported Browser: The browser supported by DOM Style UserSelect are listed below:

Google Chrome 54 and above
Edge 79 and above
Internet Explorer 10 and above
Firefox 69 and above
Opera 41 and above
Safari 3 and above

HTML | DOM Style userSelect Property

Explore