CODEWITHSUNDEEP
htmlcss
user861555
user861555

Reputation:

How to disable highlight on an image

I'm trying to disable highlight on an image, when I drag my mouse over an image, it is highlighted. Take a look: enter image description here

Thanks a lot!

Upvotes: 31

Views: 40685

Answers (9)

Nisharg Shah
Nisharg Shah

Reputation: 19652

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.

Upvotes: 1

Phil
Phil

Reputation: 11175

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

Upvotes: 11

Aamer Shahzad
Aamer Shahzad

Reputation: 2947

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;
}

Upvotes: 1

Julien Le Coupanec
Julien Le Coupanec

Reputation: 7996

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;
}

Upvotes: 0

Bhushana Rao Kadimi
Bhushana Rao Kadimi

Reputation: 47

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 */      
}

Upvotes: 4

Victor
Victor

Reputation: 5769

Use user-select property:

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

Upvotes: 58

orlp
orlp

Reputation: 117771

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.

Upvotes: 14

tskuzzy
tskuzzy

Reputation: 36476

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

Upvotes: 6

nakhli
nakhli

Reputation: 4059

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

Upvotes: 4

Related Questions