How to disable text selection highlighting using CSS
×

How to disable text selection highlighting using CSS?

2982

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>


Best WordPress Hosting


Share:


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price



Leave a Reply


Comments
    Waiting for your comments