Donny Donny - 4 months ago 6x
CSS Question

Prevent highlighting canvas area in Chrome

On our whiteboard application, Chrome users are able to highlight the entire canvas if they drag their mouse a certain way:

Any ideas on how to prevent this from happening? You may give it a test yourself at: (then click the green 'start session' button).



Applying this CSS to the body seems to do the trick for me in Chrome:

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

Others have said that these properties are not yet respected by Opera and IE, and instead, you need to set the unselectable attribute on the elements, like so:

<body unselectable="on">

I don't have either of those browsers, so I can't confirm this, but you can see these posts for more detail:

css rule to disable text selection highlighting

Is there a way to make text unselectable on an html page?