How to remove dashed line around clicked element in html

Question

I found that if there is a link on the page that does not link to the new page, then when the user clicks on it, there will be a dashed line around the element, it will disappear only when the user clicks something else on the page, how to remove it ?

Example:

Notice the dashed line around the Section 2 element.

Answer 1

Use outline:none to bind a tag class

Answer 2

As @Lo Juego said, read the article

 a, a:active, a:focus { outline: none; } 

Answer 3

 a { outline: 0; } 

But read this before changing:

removing-the-dotted-outline

Answer 4

To remove all outlined contours, including bootstrap tags.

 a, a:active, a:focus, button, button:focus, button:active, .btn, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus { outline: none; outline: 0; } input::-moz-focus-inner { border: 0; } 

Note. You must add the href link for bootstrap css before the main css, so bootstrap does not override your style.

Answer 5

Try it with !important in css .

 a { outline:none !important; } // it is 'very important' that there is 'no' 'outline' for the 'anchor' tag. Thanks! 

Answer 6

Removing outline damage the availability of the website. So I just leave it there, but make it invisible.

 a { outline: transparent; } 

Answer 7

A simple attempt to make the code below -

 a{ outline: medium none !important; } 

If happy greetings! good afternoon

Answer 8

In my case, it was a button, and, apparently, with buttons, this is a problem only in Firefox. The solution is found here :

 button::-moz-focus-inner { border: 0; }