How to disable highlight on a image

Question

I'm trying to disable highlight on image, when i move with my mouse on image and drag, Take a look : enter image description here

Thanks alot!

This is the top result on google for some searches. I think [this](http://stackoverflow.com/a/5225928/645270) is what many of you are looking for! — keyser, Jan 23 '13 at 00:05
Possible duplicate of [CSS rule to disable text selection highlighting](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) — showdev, Feb 16 '16 at 17:27

score 57 · Answer 1 · answered Aug 03 '11 at 22:40

57

Use user-select property:

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

answered Aug 03 '11 at 22:40

Victor

5,493
1
27
28

1

I think this is the cleanest method as of today. Also, for anyone looking for a way to disable odd effects in images like I was, take a look at the `draggable` attribute. Setting it to `false` in the img tag will avoid the ghost image should the user accidentally (or not) drag it. – Herick Nov 13 '14 at 11:45

orlp · Answer 2 · 2011-07-25T13:04:25.353

14

You can try this (this won't work in all browsers):

img::-moz-selection {
    background-color: transparent;
    color: #000;
}

img::selection {
    background-color: transparent;
    color: #000;
}

Or you can use a <div> with the appropriate width and height set and use a CSS background image on it. For example I use this on my site:

<div id="header"></div>

#header {
    height: 79px;
    width: 401px;
    background: url(http://nclabs.org/images/header.png) no-repeat;
}

And finally you can use Javascript to programatically disable it.

edited Jul 25 '11 at 13:04

answered Jul 25 '11 at 12:29

orlp

112,504
36
218
315

2019 already, and the selection pseudo-selector is now the best solution. – Romain Jan 23 '19 at 13:12

Phil · Accepted Answer · 2018-06-29T18:24:49.853

10

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

edited Jun 29 '18 at 18:24

answered Jul 25 '11 at 12:29

Phil

10,948
17
69
101

@Phil You could edit your answer, so it's no longer incorrect. There are heavy discussions about deleting accepted answers and why it shouldn't be deleted. https://meta.stackoverflow.com/questions/272849/please-allow-me-to-delete-my-own-accepted-answer – tom_mai78101 Jun 29 '18 at 12:44

score 6 · Answer 4 · answered Jul 25 '11 at 12:31

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

Great Technique, solved for android webview. Thanks. – Aung Aung Swe May 30 '17 at 19:22 — Aung Aung Swe, May 30 '17 at 19:22

score 4 · Answer 5 · answered Jul 25 '11 at 12:28

4

Try to put it as a css background instead of an img element.

answered Jul 25 '11 at 12:28

nakhli

4,009
5
38
61

score 3 · Answer 6 · answered Feb 16 '16 at 09:46

3

img{
   -ms-user-select: none;      /* IE 10+ */
   -moz-user-select: none;     /* Firefox all */
   -webkit-user-select: none;  /* Chrome all / Safari all */
   user-select: none;          /* Likely future */      
}

answered Feb 16 '16 at 09:46

Bhushana Rao Kadimi

37
3

score 1 · Answer 7 · answered Oct 20 '17 at 09:56

1

To remove the selection of text and images from entire website use body selector

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

answered Oct 20 '17 at 09:56

Aamer Shahzad

2,617
1
27
25

score 1 · Answer 8 · answered May 14 '21 at 10:53

1

If you are facing a problem when you click on the image, here is the solution to that.

img {
  -webkit-tap-highlight-color: transparent;
}

if not working then please try that in your parent of the image that contains the whole width of the image.

answered May 14 '21 at 10:53

Nisharg Shah

16,638
10
62
73

score 0 · Answer 9 · answered Feb 13 '17 at 01:47

In case some people here are interested about the sass mixin:

// Prevent users to select an element
@mixin no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

How to disable highlight on a image

9 Answers9

Linked