Stop HTML text being highlighted

Question

part of my page requires some double-clicking, which has the undesirable effect that sometimes the user inadvertently highlights some of the text on the page.

It's just untidy really, but is there a neat way to stop this happening, other than by using images instead of text?

Thanks

Solution 1

Here is the css disables text selection. How to disable text selection highlighting using CSS?

-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;

Solution 2

As @arunes suggested, you can do this with CSS for most browsers. However I've read that this doesn't work with IE 6-8 (at least). So for that, you might need something like:

document.getElementById("divDoubleClick").onselectstart = function() { return false; };

Solution 3

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.