How Can I Prevent Text Selection on My HTML Page?

Unselecting Text on an HTML Page: A Comprehensive Guide

In the realm of user experience, it can be desirable to prevent text selection on certain elements within an HTML page. This is particularly relevant for elements like tab names, which can appear unappealing when highlighted.

CSS Solution

Fortunately, most modern browsers offer a CSS-based solution:

*.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;

  /* IE 10+ */
  -ms-user-select: none;
  user-select: none;
}

Simply add this code to your stylesheet, and the designated elements will become unselectable.

IE and Opera Alternative

For earlier versions of Internet Explorer and Opera, the unselectable attribute can be used:

<div>
<p>However, note that this attribute is not inherited, so you may need to explicitly set it for each descendent element.</p>
<p><strong>Recursive JavaScript Solution</strong></p>
<p>If you encounter inheritance issues, you can employ JavaScript to apply the unselectable attribute recursively:</p>
<pre class="brush:php;toolbar:false">function makeUnselectable(node) {
  if (node.nodeType == 1) {
    node.setAttribute("unselectable", "on");
  }
  var child = node.firstChild;
  while (child) {
    makeUnselectable(child);
    child = child.nextSibling;
  }
}

makeUnselectable(document.getElementById("foo"));