Disable DIV selection when clicking on it

Question

How can i avoid selecting a div and hide the highlight when i click in it?
I want to hide the dotted outline:

(can't get the screenshot to appear, here it is: https://i.stack.imgur.com/3OKaP.png)

Answer 1

it can be done with a css class . like .if this is your div :

<div class='disableSelection'>text</div>

then apply this css .

<style>
.disableSelection{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
}
</style>

Answer 2

Useoutline:none or outline:0

Check the similar one here

Answer 3

this worked in my case:

element {

-webkit-tap-highlight-color: transparent;

}

as per Mozilla Docs

Answer 4

Add outline:0; to your div.

I usually see this problem on IE more than other browsers.

Ref here for more info:

Answer 5

Not sure if this is what you're looking for, but check Chris Coyers article (Removing The Dotted Outline) on this

But think about the usability issues if you don't set an alternative active state at all. But I guess Chris is mentioning this anyway.

Answer 6

*:focus{outline:none}

• please add this code in your css file. This is css issue

Answer 7

Very important to add "a", to say you are adding it for a link:

<style>
.disableSelection a {
outline: 0;
}
</style>