Skip to content
Related Articles

Related Articles

HTML | DOM Style userSelect Property
  • Last Updated : 04 Oct, 2019

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:






<!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 Buttton:
  • After Clicking On Button:

Example-2:




<!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
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :