Disable text selection highlighting using CSS

sakthi4 years ago4 years ago01 mins

To disable/prevent text selection in your pages you can use CSS user-select property. By using this property you can specifies whether the text of an element can be selected or not.

Below is the example to disable text selection using CSS

Code

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
  
<style type="text/css"> 
    .disable-text{ 
        -webkit-user-select:none; 
        -webkit-touch-callout:none; 
             -moz-user-select:none; 
             -ms-user-select:none; 
             user-select:none;    
  
       } 
  
</style> 
<body> 
<p>Unselectable Text</p> 
<div class="disable-text"> 
<h1>Sample text</h1> 
</div> 
<div> 
<p>Selectable Text</p> <h1>Sample Text</h1></div> 
</body> 
</html>