How to disable text selection highlighting using CSS

How to disable text selection highlighting using CSS?


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


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




<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Disable text selection highlighting using CSS</title>
      margin: 0px auto;
      width: 50%;
      text-align: center;
       color: red;
       letter-spacing: 2px;
        -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 */
<div class="main-div">
<h1>Disable Text Selection</h1>
<p>Unselectable Text</p>
<div class="disable-web-text">
<h2>Coding Tag</h2>

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

Best WordPress Hosting


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price

Leave a Reply

    Waiting for your comments