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?

What browser are you in? In my testing I couldn't get a whole div to highlight in Firefox 5, Chrome 12 or IE9. — tw16, Aug 10 '11 at 22:29

score 194 · Accepted Answer · edited Dec 18 '20 at 20:46

194

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>

edited Dec 18 '20 at 20:46

rubo77

19,527
31
134
226

answered Aug 10 '11 at 22:01

tw16

29,215
7
63
64

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. – dave Aug 10 '11 at 22:18
@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. – tw16 Aug 10 '11 at 22:37
1

Doesn't work in IE or Opera. You need the `unselectable` attribute. There's no `-o-user-select`, by the way. – Tim Down Nov 12 '11 at 15:43
note for SASS/SCSS users: you can ```@include user-select(none);``` instead of using raw CSS – hilnius Jul 16 '19 at 16:24
Strangely, this caused the divs to become draggable even when `draggable = false`, but only on Firefox. – rovyko Mar 18 '20 at 04:47
6

Almost a decade has passed, so time for a little update: `user-select: none` should be [pretty well supported by now](https://caniuse.com/user-select-none). – bluenote10 Dec 15 '20 at 21:58

score 63 · Answer 2 · edited Oct 05 '15 at 20:23

63

This works for me

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

edited Oct 05 '15 at 20:23

Howdy_McGee

10,422
29
111
186

answered Apr 15 '13 at 11:12

Hans

995
8
11

1

This should be the best answer. – JohnA10 Apr 26 '16 at 21:28
12

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. – Simon East May 19 '16 at 05:08

score 38 · Answer 3 · edited Jun 05 '20 at 08:10

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

SterlingVix · Answer 4 · 2015-10-20T20:42:29.620

8

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

edited Oct 20 '15 at 20:42

answered Dec 29 '14 at 03:48

SterlingVix

321
6
12

Do not ever use this CSS when you have a PWA on iOS 13, this completely blocks the keyboard. – Fer Mar 02 '20 at 21:08

score 2 · Answer 5 · answered May 19 '16 at 21:29

2

Target all div elements:

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

Target all elements:

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

answered May 19 '16 at 21:29

jasonleonhard

12,047
89
66

Jin. · Answer 6 · 2015-02-02T14:29:46.143

1

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

edited Feb 02 '15 at 14:29

answered Jan 31 '15 at 10:59

Jin.

11
2

3

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) 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. – msrd0 Jan 31 '15 at 15:40

score 0 · Answer 7 · answered Aug 26 '20 at 14:32

0

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

answered Aug 26 '20 at 14:32

Medda86

1,582
1
12
19

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

7 Answers7

Target all div elements:

Target all elements:

Linked