Making your :focus style fit in with one line of CSS

I read a post the other day about bad devs removing focus styles, which really harms accessibility.

The usual reason for doing so is that the browser native focus style is ugly and clashes with the site theme. And fair gripe, it is ugly.

So here's the simple fix, which is just as easy as removing the style:

:focus {
    outline-color: /* your foreground text colour */;
}

Since we're just defining outline color, this won't add an outline to things that don't already have one. If you have a more descriptive rule for specific elements, they'll simply override this 0-specificity rule.

Please make sure the colour you use has high enough contrast to be noticeable -- although if the colour you're using for text doesn't, your site has another problem 😀