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 *

De volgende HTML-tags en -attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>