This article explain how to disable the text selection in a web page using css. This can be achieved using javascript also. but using java script is not relaible to disblae the text selection in web pages compared to css.


disable select text using css

disable select text using css

The below piece of cross browser css code will disable the text selection in html.


-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

But most of the modern browsers supports CSS3. So this can be achieved using proprietary variations on the proposed-but-now-defunct CSS3 user-select property:


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

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

For IE less than 10 and Opera, unselectable attribute of the element needs to be used. This can be achieved by setting attribute in HTML:


...

Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:


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"));

This still doesn't cover all possibilities. While it is impossible to initiate selections in unselectable elements, in some browsers (IE and Firefox, for example) it's still impossible to prevent selections that start before and end after the unselectable element without making the whole document unselectable.


So the JavaScript solution for IE is


onselectstart="return false;"