How do I remove outline on link click?

HtmlCssHyperlinkOutline

Html Problem Overview

When I click a link on my website it is creating an outline around the link like so

enter image description here

I've tried adding:

a.image-link:focus { outline: 0; }

and

a {outline : none;}

But nothing seems to get rid of it. Is there a way to remove it?

Html Solutions

Solution 1 - Html

You can just use this:

a:active, a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}

Solution 2 - Html

If at-least one of the solutions above doesn't work for anyone. Give this a try as well

a:active, a:focus {
 box-shadow: none;
}

Solution 3 - Html

Just add a:visited { outline: none; } in your style file.

Solution 4 - Html

Simply add outline:none; text-decoration:none;

Solution 5 - Html

try all of these until u find what works in your case.

a:active, a:focus, li:focus, li:active {
    outline: none !important;
    border: none !important;        
    text-decoration: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none;
}

Solution 6 - Html

Fixed:

Found out in my CSS that there was code already being generated to create an outline on a:active. This was overriding my code and removing it fixed the problem.

Solution 7 - Html

Worked for me > I battled this for a while and this worked for me on WordPress 5.5.3 with StoreFront theme:

a:hover,
a:active {
    outline: none;
    box-shadow: none !important;
}
Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Hyperlink Solutions

Previous Solution:

Are objects with the same id always equal when comparing them with ==?

PythonEquality

Next Solution:

Create an instance of a class in ES6 with a dynamic name?

JavascriptClassDynamicEcmascript 6

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
QuestionSaturnsEyeView Question on Stackoverflow
Solution 1 - HtmlNuno BentesView Answer on Stackoverflow
Solution 2 - HtmlVKSView Answer on Stackoverflow
Solution 3 - HtmlRajeevView Answer on Stackoverflow
Solution 4 - HtmlPullat JunaidView Answer on Stackoverflow
Solution 5 - HtmlNaresh BishtView Answer on Stackoverflow
Solution 6 - HtmlSaturnsEyeView Answer on Stackoverflow
Solution 7 - HtmlMikeeyView Answer on Stackoverflow