This works for me
As suggested put the css styles in
body, div
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
also add these to allow selection within form fields
input, textarea, .userselecton
{
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
-o-user-select: text;
user-select: text;
}
Note the -moz-none thats needed or the reenable for inputs doesnt work.
for IE I add
<script type="text/javascript">
window.addEvent( "domready", function()
{
document.addEvent( "selectstart", function(e)
{
if ( (e.target.tagName == "INPUT") ||
(e.target.tagName == "TEXTAREA") ||
(e.target.hasClass("userselecton")))
{
return true;
}
return false;
} );
} );
</script>
This not only prevents selection of background text but allows selection on inputfields and and element you put the userseleton class on.