Donny Donny - 6 months ago 10
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:
http://whiteboard.rayku.com (then click the green 'start session' button).

Thanks!

Answer

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?