How do I remove outline on link click?

G

9

62

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

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?

Garcia answered 6/1, 2016 at 14:31 Comment(3)

maybe a:active{outline: 0;} – Sass 6/1, 2016 at 14:33

Possible duplicate of How can I remove the outline around hyperlinks images? – Hermia 6/1, 2016 at 14:33

Be aware that those outlines are very important for some disabled users. Many of us have consented to their existence for that reason. tjvantoll.com/2013/01/28/… – Hermia 6/1, 2016 at 14:34

H

90

You can just use this:

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

Halfhearted answered 6/1, 2016 at 14:39 Comment(3)

I´ve updated the solutions for you problem. I´ve aded the focus state on link and added also the moz-outline property. :) Can you please confirm? – Halfhearted 22/2, 2017 at 11:57

border has nothing todo with it. – Cartridge 12/9, 2017 at 14:3

outline: 0; was very useful to know – Peplos 6/1, 2021 at 22:26

A

12

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

Arleen answered 21/2, 2020 at 6:53 Comment(0)

F

5

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

Ftlb answered 9/10, 2018 at 6:15 Comment(0)

T

4

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

Thermograph answered 15/10, 2021 at 17:17 Comment(0)

H

3

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

Hindoo answered 23/6, 2018 at 17:37 Comment(0)

G

1

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.

Garcia answered 6/1, 2016 at 14:41 Comment(0)

W

1

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

Westsouthwest answered 2/12, 2020 at 9:33 Comment(0)

C

0

Worked for me

a:focus-visible {
  outline: none;
}

Cabbala answered 29/6, 2022 at 13:12 Comment(0)

S

0

You can use a, a:active, a:focus {outline: none;}

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

Sanguine answered 13/2 at 6:56 Comment(0)

Recommended topics

Hot tags