Disable text selection highlighting using CSS - Cross Browser

disable select text using css

The below CSS properties are helpful to stop the users to select the text from webpage. These are not standard properties. but still works most of the browsers.



Now we will see how to disable your visitor from highlighting the text in your web pages.

There is an experimental property called user select which will allow you to define new instructions when the visitor tries to highlight your content. This feature can be a good way of making it harder for people to highlight your content and copy it into their own website.

All you have to do is use this CSS property.

CSS :

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

The values on of the CSS property are:

    Auto - Visitors can select all content in the element.
    None - Selecting content is disabled.
    Text - Can only select text content.


HTML

from the HTML syntax you can call the CSS class. The example is given below for HTML part.

Selectable text.




Unselectable text.

Browser Support

This is currently support on webkit, firefox and IE 10. To use the property you need to prefix it with the different browser prefixes but you should also place the non-prefixed version to future proof the property.

Solution for IE 9 or below:

Since the above properties won't work for IE 9 or below version of Internet Explorer. For IE < 10 and Opera, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Unfortunately this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. 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"));

References:

StackOverFlow
Mozilla