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 difs (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 prevent content theft from your site disabling the text selection highlighting with CSS.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Create a <div> element with a class of "disabled".
  • Create another <div> inside the first <div> element and write your text.
<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 user-select to "none" to prevent the selection highlighting.
  • Also, add -Webkit- and -Moz- vendor prefixes for Safari and Firefox browsers.
.disabled {
  user-select: none;
  -webkit-user-select: none; /*Safari*/
  -moz-user-select: none; /*Firefox*/
}
The user-select is supported almost in all browsers but it still needs a vendor prefix.

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>

Result of disabling text selection highlighting

User-select:none
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.