Dotted border around link?

Question

After having read all dotted border questions possible, and not having found an answer, I write my question below.

How do i remove the dotted border around the div when i click on a link inside it?

This image shows the word "photography", which has a dotted border when clicked on.

The basics behind this is just a dropdown, that appears when that section is clicked on, which works absolutely fine, i just cannot stand that border, does my nut in.

Any ideas?

already tried css property and inline styles, it was mentioned in lots of questions — Edward Nunn, Mar 01 '17 at 13:03
http://stackoverflow.com/questions/13195081/how-to-remove-the-dotted-line-around-the-clicked-a-element-in-html — Ivin Raj, Mar 01 '17 at 13:03
If you *must* remove the focus ring, please read and follow the instructions at https://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/ to ensure that you do not break your site for keyboard-only users. — Alohci, Mar 01 '17 at 13:16

Johannes · Accepted Answer · 2017-03-01T13:18:56.430

1

That's the focus state. Try to add this:

a:focus {
  outline: none;
}

Or if that element isn't a real link, but for example just an li, make that

li:focus {
  outline: none;
}

edited Mar 01 '17 at 13:18

answered Mar 01 '17 at 13:08

Johannes

64,305
18
73
130

Yes, thankyou at last. I'm using WordPress with the Avada theme, and all you need to do is add this to the Custom CSS area. a:focus { outline: none !important; } – Edward Nunn Mar 01 '17 at 13:15

score 0 · Answer 2 · answered Mar 01 '17 at 13:10

0

You can use below css property.

a, a:hover, a:active, a:focus {
    outline: 0;
}

Please read this article - https://css-tricks.com/removing-the-dotted-outline/ and http://www.outlinenone.com/ for more clarification

answered Mar 01 '17 at 13:10

Ranjit Kumar

273
3
16

Dotted border around link?

2 Answers2

Linked