How to disable text selection highlighting using CSS?

0 3014

In this example, we have shared how to disable text selection highlighting using CSS? Texts are the most fundamental elements of any website or web page.

Sometimes we want our written text to do something when the user selects it. If we want to disable text selection, we have used user-select CSS property and set its value to none.

In most cases, it is supported in all browsers with different commands.

Chrome: -webkit-user-select
Opera: -webkit-user-select
Safari: -webkit-touch-callout
Mozilla: -moz-user-select
Internet Explorer: -ms-user-select

Note:

user-select is currently supported in all browsers except Internet Explorer 9 and earlier versions.

Syntax:

element{
  user-select:none;
}

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable text selection highlighting using CSS</title>
<style>
    .main-div{
      margin: 0px auto;
      width: 50%;
      text-align: center;
   }
   h2{
       color: red;
       letter-spacing: 2px;
   }
  .disable-web-text{ 
        -webkit-user-select:none;  /* Safari */
        -webkit-touch-callout:none;  /* iOS Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select:none; /* Firefox */ 
        -ms-user-select:none; /* Internet Explorer/Edge */
        user-select:none; /* Non-prefixed version, currently supported by Chrome and Opera */
       } 
</style>
</head>
<body>
<div class="main-div">
<h1>Disable Text Selection</h1>
<p>Unselectable Text</p>
<div class="disable-web-text">
<h2>Coding Tag</h2>
</div> 

<div class="unselect-text">
<p>Selectable Text</p> 
<h2>Coding Tag</h2>
</div>
</div>
</body>
</html>