How to disable text selection highlighting using CSS

How to disable text selection highlighting using CSS?

by Jai 06-May-20

0 542


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>


Share:


Discount Coupons



Leave a Reply


Comments
    Waiting for your comments