How to stop highlighting of a div element when double-clicking
CssXhtmlTagsHighlightingDouble ClickCss 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.