Tag: unselectable

Making HTML text unselectable with CSS

There are often circumstances where you do not want users to select certain text on your page in order to maintain a facade… rounded buttons for example.

In most browsers, this can be achieved using CSS (much of it proprietary below), For IE and Opera, you will need to use the unselectable expando property 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>
<style type="text/css">
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>

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.unselectable = true;
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));

REFERENCES: