[html] how to remove the dotted line around the clicked a element in html

I found that if there is a a link in the page which does not link to a new page,then when user click it,there will be a dotted line around the element,it will only disappear when user click anything else in the page,how to remove this?

Example:

Note the dotted line around the element Section 2.

Like @Lo Juego said, read the article

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

Try with !important in css.

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

To remove all doted outline, including those in bootstrap themes.

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 should add link href for bootstrap css before the main css, so bootstrap doesn't override your style.

Its simple try below code --

a{
outline: medium none !important;
}

If happy cheers! Good day

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

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

Removing outline will harm accessibility of a website.Therefore i just leave that there but make it invisible.

a {
   outline: transparent;
}

a {
    outline: 0;
  }

But read this before change it:

removing-the-dotted-outline