How do I remove outline on link click?

Question

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?

Possible duplicate of [How can I remove the outline around hyperlinks images?](http://stackoverflow.com/questions/814366/how-can-i-remove-the-outline-around-hyperlinks-images) — isherwood, Jan 06 '16 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. https://www.tjvantoll.com/2013/01/28/stop-messing-with-the-browsers-default-focus-outline/ — isherwood, Jan 06 '16 at 14:34

score 89 · Answer 1 · edited May 24 '18 at 07:44

89

You can just use this:

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

edited May 24 '18 at 07:44

MichaelMav

80
1
1
10

answered Jan 06 '16 at 14:39

Nuno Bentes

1,475
13
26

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? – Nuno Bentes Feb 22 '17 at 11:57
14

`border` has nothing todo with it. – Lawrence Cherone Sep 12 '17 at 14:03
1

outline: 0; was very useful to know – Chagai Friedlander Jan 06 '21 at 22:26

score 12 · Answer 2 · answered Feb 21 '20 at 06:53

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

answered Feb 21 '20 at 06:53

VKS

487
2
7
21

score 5 · Answer 3 · answered Oct 09 '18 at 06:15

5

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

answered Oct 09 '18 at 06:15

Rajeev

119
3
4

score 4 · Answer 4 · answered Oct 15 '21 at 17:17

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

score 3 · Answer 5 · answered Jun 23 '18 at 17:37

3

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

answered Jun 23 '18 at 17:37

Pullat Junaid

3,224
3
25
25

score 1 · Answer 6 · answered Jan 06 '16 at 14:41

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.

answered Jan 06 '16 at 14:41

SaturnsEye

6,297
10
46
62

score 1 · Answer 7 · answered Dec 02 '20 at 09:33

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

answered Dec 02 '20 at 09:33

Mikeey

11
1

score 0 · Answer 8 · answered Jun 29 '22 at 13:12

0

Worked for me

a:focus-visible {
  outline: none;
}

answered Jun 29 '22 at 13:12

Fahimeh Ahmadi

813
8
13

How do I remove outline on link click?

8 Answers8

Linked