119

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.

Community
  • 1
  • 1
hguser
  • 35,079
  • 54
  • 159
  • 293

8 Answers8

207

Use outline:none to anchor tag class

Mark
  • 6,762
  • 1
  • 33
  • 50
Sowmya
  • 26,684
  • 21
  • 96
  • 136
  • Thanks but it is not working for me,i have created so many links previously i never get this problem till now. but now i am in confused so what is the the reason previous to present ? – Durgaprasad Nov 16 '13 at 11:51
  • 18
    Note that this will harm [accessibility](http://www.outlinenone.com/) of your website. – mike23 Aug 06 '14 at 12:38
  • 3
    @Durgaprasad see Marks answer. You need to apply that to `a:active, a:focus` also. – Odys Nov 07 '14 at 12:53
  • I agree w/ mike23. My attempt at reaching a compromise is to, on the click event (or perhaps mouseup would be even better?), remove the outline for just that link (while also resetting any and all links back to have an outline right before said removal ... else things get cumulatively stuck being unoutlined). This temporarily removes the outline from the last clicked element while keeping it on others, so you can still know what you're tabbing through. – Max Starkenburg Apr 27 '16 at 20:56
  • I would use this for a responsive menu, which would be visible only on **mobile devices**. Does that affect that _accessibility_ issue too? – iorgv Oct 28 '16 at 14:24
  • I saw that else where they mentioned `outline: 0` but when I went and tried that on a text box, it lost its action listener for some reason. The `outline: none` works fine though. – timon_the_destroyer Nov 09 '16 at 12:49
  • 1
    @cpu_meltdown Try `input:focus{outline: none}` – Sowmya Nov 10 '16 at 10:45
57

Like @Lo Juego said, read the article

a, a:active, a:focus {
   outline: none;
}
Mark
  • 6,762
  • 1
  • 33
  • 50
12
a {
    outline: 0;
  }

But read this before change it:

removing-the-dotted-outline

Niks Jain
  • 1,617
  • 5
  • 27
  • 53
Lo Juego
  • 1,305
  • 11
  • 12
8

Try with !important in css.

a {
  outline:none !important;
}
// it is `very important` that there is `no` `outline` for the `anchor` tag.  Thanks!
Aakash
  • 21,375
  • 7
  • 100
  • 81
7

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.

OldTrain
  • 1,880
  • 1
  • 25
  • 22
3

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

a {
   outline: transparent;
}
chankruze
  • 669
  • 11
  • 16
  • 1
    Setting the outline to be transparent still harms the accessibility of your website. The idea is that it provides a visual indicator that an element is focused. If you make it non-visible, that indicator is lost. More info here: http://www.outlinenone.com – ktbee Oct 27 '19 at 14:41
1

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;
}
Andrew
  • 5,839
  • 1
  • 51
  • 72
0

Its simple try below code --

a{
outline: medium none !important;
}

If happy cheers! Good day

loyola
  • 3,905
  • 2
  • 24
  • 18