Open In App

HTML | DOM Style userSelect Property

Last Updated : 05 Jun, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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

M

manaschhabra2
Improve
Article Tags :

Explore

Lightbox