DEV Community

loading...
Cover image for How to disable text selection on double-click using CSS?

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

MELVIN GEORGE
Hi, I'm Melvin George, A web developer, and a blogger.
Originally published at melvingeorge.me ・1 min read

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;
}
Enter fullscreen mode Exit fullscreen mode

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

<p>Hello World!</p>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 😃.


Discussion (0)