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

HtmlCss

Html Problem Overview

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:

enter image description here

Note the dotted line around the element Section 2.

Html Solutions

Solution 1 - Html

Use outline:none to anchor tag class

Solution 2 - Html

Like @Lo Juego said, read the article

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

Solution 3 - Html

a {
    outline: 0;
  }

But read this before change it:

removing-the-dotted-outline

Solution 4 - Html

Try with !important in css.

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

Solution 5 - Html

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.

Solution 6 - Html

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

a {
   outline: transparent;
}

Solution 7 - Html

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

Solution 8 - Html

Its simple try below code --

a{
outline: medium none !important;
}

If happy cheers! Good day

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Adding an onclick function to go to url in JavaScript?

JavascriptJqueryHyperlink

Next Solution:

How to "warm-up" Entity Framework? When does it get "cold"?

asp.netasp.net MvcEntity Frameworkasp.net Mvc-4Entity Framework-5

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionhguserView Question on Stackoverflow
Solution 1 - HtmlSowmyaView Answer on Stackoverflow
Solution 2 - HtmlMarkView Answer on Stackoverflow
Solution 3 - HtmlLo JuegoView Answer on Stackoverflow
Solution 4 - HtmlAakashView Answer on Stackoverflow
Solution 5 - HtmlOldTrainView Answer on Stackoverflow
Solution 6 - HtmlchankruzeView Answer on Stackoverflow
Solution 7 - HtmlAndrewView Answer on Stackoverflow
Solution 8 - HtmlloyolaView Answer on Stackoverflow