How to remove selection on images - html

Question

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.

Answer 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/

Answer 2

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