Categories
CSS

Disable text selection highlighting using CSS

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>

Leave a Reply

Your email address will not be published. Required fields are marked *