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

score 13 · Accepted Answer · edited May 23 '17 at 12:06

13

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;

edited May 23 '17 at 12:06

Community

1
1

answered Mar 08 '12 at 15:27

arunes

3,464
2
21
31

1

Good enough for me! Thanks :) – CompanyDroneFromSector7G Mar 08 '12 at 15:41
3

Why did you add -webkit-touch-callout: none;? – Shay Elkayam May 03 '16 at 11:13

Travesty3 · Answer 2 · 2012-03-08T16:07:23.477

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

edited Mar 08 '12 at 16:07

answered Mar 08 '12 at 15:33

Travesty3

14,351
6
61
98

score 2 · Answer 3 · answered Mar 08 '12 at 15:45

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.

Stop HTML text being highlighted

3 Answers3