How to Disable Text Selection Highlighting Using CSS

Today it is widespread to copy a text from one site and post it on another like it is your own content. This is called plagiarism.

There are many code diffs (also, see our Code Diff tool) and plagiarism tools across the Internet that show the stolen content. Also, text selection highlight is not desirable when designing a website.

In this snippet, we are going to show how to disable text selection highlighting with CSS.

Create HTML

Create a <div> element with a class of "disabled".
Create another <div> inside the first <div> element and write your text.

How to Disable Text Selection Highlighting Using CSS

<h2>User-select:none</h2>
<div class="disabled">
  <div>Lorem Ipsum is simply dummy text...</div>
</div>

Add CSS

Now that we have created the HTML part, it is time to add a little CSS code to disable the text selection. The CSS user-select property comes to the rescue!

Set the <span class="property">user-select</span> to "none" to prevent the selection highlighting.
For older browser support, you can add -webkit- and -moz- vendor prefixes, though they are largely unnecessary in modern browsers.

How to Disable Text Selection Highlighting Using CSS

.disabled {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
}

Tip

The <span class="property">user-select</span> property is supported in all modern browsers without vendor prefixes. Note that this only prevents mouse highlighting; it does not block copying via keyboard shortcuts or developer tools.

Let’s bring the code parts together and see the result.

Example of disabling the text selection highlighting:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .disabled {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
      }
    </style>
  </head>
  <body>
    <h2>User-select:none</h2>
    <div class="disabled">
      <div>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
          when an unknown printer took a galley of type and scrambled it to make a type 
          specimen book. It has survived not only five centuries, but also the leap into
          electronic typesetting, remaining essentially unchanged. It was popularised 
          in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
          and more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Result of disabling text selection highlighting

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <strong>User-select:none</strong> <div class="disabled"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div>