CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chromeimage
Pure Function
Pure Function

Reputation: 2147

Remove blue overlay/highlight from selected images

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>

Upvotes: 40

Views: 34835

Answers (1)

David Thomas
David Thomas

Reputation: 253416

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.

Upvotes: 89

Related Questions