Prevent selection in HTML

The proprietary variations of user-select will work in most modern browsers:

*.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 < 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>

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

It's seem CSS user-select don't prevent image drag and drop... so..

HTML :

<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla

CSS :

* {     user-select: none;    -khtml-user-select: none;    -o-user-select: none;    -moz-user-select: -moz-none;    -webkit-user-select: none;}::selection { background: transparent;color:inherit; }::-moz-selection { background: transparent;color:inherit; }

JS :

$(function(){    $('*:[unselectable=on]').mousedown(function(event) {        event.preventDefault();        return false;    });});

I use cancelBubble=true and stopPropagation() in the mouse down and move handlers.