Skip to content
Related Articles

Related Articles

HTML | DOM Style userSelect Property

Improve Article
Save Article
  • Last Updated : 05 Jun, 2022
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!