DEV Community


Posted on


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 */;
Enter fullscreen mode Exit fullscreen mode

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 😀

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git