How to disable text selection highlighting?

Learn how to disable text selection highlighting using HTML, CSS, and Javascript with code examples and demo.

There are several ways to disable text selection highlighting, depending on the specific context in which you want to do this.

We can achieve it either using HTML, CSS or JavaScript.

Here are some common methods:

1. Using HTML

You can also use the HTML “onselectstart” attribute to prevent text selection highlighting for a particular element.

For example:

<div onselectstart="return false;">
  This text cannot be selected.
</div>

This will prevent text selection for the “div” element and its contents.

CodePen Link: https://codepen.io/arctutorials/pen/wvEZxqX

2. Using CSS

If you want to disable text selection highlighting for a particular element on a web page, you can use CSS to set the user-select property to none.

For example:

.no-select {
  user-select: none;
}

Then, add the class “no-select” to the HTML element you want to disable text selection for.

CodePen Souce Code: https://codepen.io/arctutorials/pen/XWPQBzJ

3. Using JavaScript

If you want to disable text selection highlighting for the entire web page, you can use JavaScript to listen for the selectstart event and prevent its default behavior.

For example:

document.addEventListener("selectstart", function(event) {
  event.preventDefault();
});

This will prevent the default text selection behavior from occurring when the user tries to select text.

Note that disabling text selection highlighting can sometimes interfere with the user experience or accessibility of your website or application, so use this feature judiciously.