0

I want to remove the selection-highlight on all images on my page. I found some useful additions like :

CSS

img {
     -webkit-user-select:none;
     -khtml-user-select:none;
     -moz-user-select:none;
     -o-user-select:none;
      user-select:none;
      pointer-events:none
}

But when I press down my mouse button and select multiple things or press Ctrl+A for "select all" my images get highlighted with a blue shade. I tried to change it via :

CSS

img::selection      {background:transparent;color:inherit;}
img::-moz-selection {background:transparent;color:inherit;}

But that don't have any effect.

Does someone have a useful solution or is there none yet ?

P.S. : I don't care about selecting my images - I just want to get rid of that blue shape.

Danield
  • 121,619
  • 37
  • 226
  • 255
Kris
  • 567
  • 3
  • 11
  • 25

2 Answers2

1

Here goes a wacky solution I came up with...

1) After some testing I found that this only occurs on mozilla. Other browsers don't show the blue selection on images when the code

img::selection {
    background: transparent;
}

is set.

2) Even mozilla - only has a problem with image elements. But other elements with a background-image obey the ::selection rule.

So technically we could work around this assuming we add an empty span in our markup after each img element which we set to display:none;

Then we can add some CSS which will only run in firefox which sets the images to display:none and places a background-image on the adjacent span.

Like this:

FIDDLE

**

img::selection {
    background: transparent;
}
img + span {
    display: none;
}

@-moz-document url-prefix() {
    img {
        display: none;
    }
    
    img + span {
        background: url(http://placehold.it/200x200) no-repeat;
        width: 200px;
        height: 200px;
        display: block;
    }
}
<div>Hello there </div>

<img src="http://placehold.it/200x200" /><span></span>

<div>Hello there </div>
1: http://jsfiddle.net/GMuzV/30/
Danield
  • 121,619
  • 37
  • 226
  • 255
  • Well it works nice - sadly I forgot to mention I need the tag itself for SEO purposes. If no other solution is found today - you'll get the bounty reward for your research and work tho ;) – Kris Sep 17 '14 at 11:17
  • 1
    I wasn't proposing to eliminate the img elements. My solution proposes to just set `display:none` on them, and also - only for forefox. This should not interfere with SEO because the markup remains pretty much the same (except for the extra span) – Danield Sep 17 '14 at 11:25
  • 1
    Do you really think that google-bots are not able to lower your SEO, since key elements are on display:none; or visibility:hidden; ? Then why people have big visible tagclouds or footer ? – Kris Sep 17 '14 at 18:12
0

This disabled highlighting on a DOM element:

function disableSelection(target){
    if (typeof target.onselectstart!="undefined") // if IE
        target.onselectstart=function(){return false}
    else if (typeof target.style.MozUserSelect!="undefined") // if Firefox
        target.style.MozUserSelect="none";
    else // others
         target.onmousedown=function(){return false;}

    target.style.cursor = "default";
}

Use it like this:

disableSelection(document.getElementById("my_image"));
KaMZaTa
  • 535
  • 2
  • 9
  • 24