40

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>
The Codesee
  • 3,714
  • 5
  • 38
  • 78
Pure Function
  • 2,129
  • 1
  • 22
  • 31
  • http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting => http://jsfiddle.net/steweb/2qPWz/ – stecb Mar 07 '11 at 22:16
  • Does this answer your question? [How to disable text selection highlighting](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting) – The Codesee Jul 18 '20 at 12:59

1 Answers1

89

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.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • absolutely perfect solution. Thank you so much. Struggled to find this online. You made my day. :D – Pure Function Mar 07 '11 at 22:35
  • @Code Novitiate, no problem at all, glad to be of help! =) – David Thomas Mar 07 '11 at 22:37
  • You can also use outline: none; – Mr. Smee Jul 25 '11 at 18:29
  • 4
    @mrsmee: `outline: none;` prevents the default outline being applied to the element on focus; but it doesn't prevent selection (at least, not in Chromium 12 and Firefox 5 on Ubuntu 11.04...). In which browser/platform have you observed this behaviour? – David Thomas Jul 25 '11 at 18:44
  • 5
    This does not seem to be valid anymore, testing in Firefox 17 on Ubuntu 12.04 the fiddle images are still draggable and selectable. (CTRL/CMD+A to reproduce). – joar Dec 06 '12 at 09:45
  • 2
    to stop images being dragged in Firefox: draggable="false" http://stackoverflow.com/questions/7439042/css-js-to-prevent-dragging-of-ghost-image – Pure Function Dec 17 '13 at 22:26
  • @DavidThomas Great!! This works for me for FlexSlider – Mahesh Feb 05 '14 at 07:33
  • This worked for me in Firefox 29 after adding a 1px transparent Border to the Image. IMG{ border: 1px solid transparent; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } – Peh Jun 16 '14 at 08:32
  • @Fr0zenFyr: For me it worked in a Gallery. When I clicked fast on the "next Image-Button" FF29 displayed Images with that blue transparent overlay. For Debugging I added a 10px red border to the Image see if the CSS is working. I don't why but the Images did not come up with that blue overlay anymore. So: For me it worked. – Peh Jun 16 '14 at 11:33
  • Hero! I was going crazy trying to work out what was. – sowasred2012 Dec 11 '14 at 11:29