Filed Under: CSS Snippets

Removing the dotted outline

Anchor links by default have a dotted outline around them when they become “active” or “focused”. This is default styling for the purpose of accessibility. For people without the ability to use a mouse (are they still alive?), they still need some visual indicator that they currently have a link active (so, for example, they can press enter to navigate to that link).

The dotted outline is for me one of those annoying things i rather get rid of.

How to remove it?

If you want it gone, and you want it gone on every single anchor link, just include this part in your stylsheet:

a {
   outline: none;
}

But bear in mind the outline has a important function. You should really consider adding back in a style for your links focus and active states!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *