How to disable text selection on double-click using CSS?

Originally posted here!

To disable the text selection when the user double clicks on the HTML element, you can use the user-select property and set its value to none in CSS.

TL;DR

/* Disable text selection  */
.paragraph {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

For example, let's say we have the text of Hello World! inside a paragraph <p> tag like this,

<p>Hello World!</p>

Now if the user tries to double click on it, it will show the selection color over the text. Our goal is to remove that.

So let's attach a class with the name of paragraph to it so that we can reference it in the CSS file like this,

<p class="paragraph">Hello World!</p>

Now in the CSS file we can add the user-select property and set the value to none like this,

/* Disable text selection  */
.paragraph {
  user-select: none;
}

That's it! To complete support this feature on all browsers we add the browser prefixes also like this,

/* Disable text selection with support on major browsers */
.paragraph {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

Now if the user tries to select it using double-click, it won't show the selection color over it.

See the above code live in JSBin

Feel free to share if you found this useful 😃.