How to stop highlighting of a div element when double-clicking

Question

I have this div element with a background image and I want to stop highlighting on the div element when double-clicking it. Is there a CSS property for this?

Selfdenial

What browser are you in? In my testing I couldn't get a whole div to highlight in Firefox 5, Chrome 12 or IE9. – Halifax

Answer 1

The CSS below stops users from being able to select text. Live example: http://jsfiddle.net/hGTwu/20/

/* If you want to implement it in very old browser-versions */
-webkit-user-select: none; /* Chrome/Safari */ 
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* The rule below is not implemented in browsers yet */
-o-user-select: none;

/* The rule below is implemented in most browsers by now */
user-select: none;

To target IE9 downwards and Opera the HTML attribute unselectable must be used instead:

<div unselectable="on">Test Text</div>

Halifax

that didn't prevent the entire div from being highlighted. I noticed it was only for text. I want to prevent the entire div from being highlighted when double clicking on it. – Selfdenial

@dave: I assumed since the only time double clicking caused highlighting is when there was text in it that is what you meant. No need to downvote. – Halifax

Doesn't work in IE or Opera. You need the unselectable attribute. There's no -o-user-select, by the way. – Crumble

note for SASS/SCSS users: you can @include user-select(none); instead of using raw CSS – Algonkian

Strangely, this caused the divs to become draggable even when draggable = false, but only on Firefox. – Limp

Almost a decade has passed, so time for a little update: user-select: none should be pretty well supported by now. – Synodic

Answer 2

This works for me

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

Explication

This should be the best answer. – Width

This will only be relevant for webkit browsers such as Chrome and Safari, and will likely not work in any version of IE or Firefox. – Seanseana

Answer 3

I was trying to find a solution to stopping div highlighting in Chrome, and turned to this post. But, unfortunately, none of the answers solved my problem.

After a lot of online research, I found that the fix is something very simple. There is no need for any complex CSS. Just add the following CSS to your web page and you are all set. This works in laptops as well as mobile screens.

div { outline-style:none;}

NOTE: This worked in Chrome Version 44.0.2403.155 m. Also, it is supported in all major browsers of today as explained at this url: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

Parallelism

Answer 4

I'm no CSS expert, but I think you can use tw16's answer as long as you expand the number of elements affected. For instance, this prevents highlighting everywhere on my page without affecting any other kind of interactivity:

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

That first line is courtesy of Paul Irish (via http://adamschwartz.co/magic-of-css/chapters/1-the-box/).

Concettaconcettina

Do not ever use this CSS when you have a PWA on iOS 13, this completely blocks the keyboard. – Crowbar

Answer 5

Target all div elements:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

Target all elements:

::-moz-selection { background:transparent; }
::selection { background:transparent; }

Disenchant

Answer 6

disable user selecting:

div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

set background transparent for selected element:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

Monicamonie

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Family

Answer 7

If an element is clickable, you might want to make it a button element.

Hammerless