Remove Annoying Blue Overlay from Selected Images with css/js or html?

I'm having trouble after much googling with this, and I'm guessing maybe its not possible, but anyway I thought I should ask.

I'm making a web application with some animated clickable images and I notice (particularly in chrome but also in ff) that any slight accidental dragging over the image turns it blue. (to indicate it is selected) Is there any way in jquery, css or html to deactivate this annoying side effect, or perhaps is there a way to use images without having this default behaviour?

I hope I've made my question succinct enough. I can't provide code (commercially sensitive) but I can tell you that all my images are inside unordered lists like this:

  <li><img src="path"/></li>
  <li><img src="path"/></li>
  <li><img src="path"/></li>


I think, to prevent user-selection cross-browser, you could use:

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

JS Fiddle demo.

Need Your Help

What is the meaning of "generic programming" in c++?


What is the meaning of generic programming in c++?