Focus styles are not just for inputs

At some point in a project, someone looked at a page and asks why there’s a fuzzy blue outline around things when they click. It looks unfinished, they say. Can it go? The developer, being agreeable, writes outline: none somewhere global, and the fuzz is gone. So is the only indication a keyboard user had of where they were on the page.

The strange part is that the same project usually has lovely focus styles on its form inputs. A soft border color change, maybe a subtle shadow, sometimes even a little transition. Real care went in there. Then you tab from the last input to the submit button and the visible focus simply vanishes, as if the page lost track of you. It didn’t. You’re on the button. You just have to take that on faith, or start pressing Enter on things to find out where you are, which is a bold way to navigate a form.

The tension is real, to be fair. The default outline appears on click in some browsers, not just on keyboard focus, and it genuinely can clash with a design. But the fix was never removal. It’s :focus-visible, which most browsers now use to show focus for keyboard users while sparing mouse users the outline, and it’s been well supported for years. The blue fuzz the client objected to and the focus indicator the keyboard user needs stopped being the same thing a while ago.

And the replacement doesn’t need to be a design project. outline: 2px solid var(--color-accent) covers it. Add outline-offset: 2px if you’re feeling fancy. Outlines don’t affect layout, they follow the element’s shape, and they work on links, cards, toggles, tabs, and everything else that takes focus, not just the inputs that happened to get the styling budget. They don’t have to be beautiful. They have to be there.