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

CssXhtmlTagsHighlightingDouble Click

Css Problem Overview


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?

Css Solutions


Solution 1 - Css

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>

Solution 2 - Css

This works for me

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

Solution 3 - Css

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

Solution 4 - Css

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/).

Solution 5 - Css

Target all div elements:
div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
Target all elements:
::-moz-selection { background:transparent; }
::selection { background:transparent; }

Solution 6 - Css

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

Solution 7 - Css

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiondaveView Question on Stackoverflow
Solution 1 - Csstw16View Answer on Stackoverflow
Solution 2 - CssHansView Answer on Stackoverflow
Solution 3 - CssSunilView Answer on Stackoverflow
Solution 4 - CssSterlingVixView Answer on Stackoverflow
Solution 5 - CssjasonleonhardView Answer on Stackoverflow
Solution 6 - CssJin.View Answer on Stackoverflow
Solution 7 - CssMedda86View Answer on Stackoverflow