jquery - Remove blue overlay/highlight from selected images

Question

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?

My images are inside unordered lists like this:

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

question from:https://stackoverflow.com/questions/5225894/remove-blue-overlay-highlight-from-selected-images

Answer 1

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.