Remove focus outline without breaking accessibility

It used to be if you removed focus outline you got rid of the messy focus rings during mouse clicks but you also broken accessibility; the :focus-visible selector solves this problem. It preserves accessibility because the browser automatically detects keyboard navigation and applies the :focus-visible rule, restoring default native appearance. This ensures keyboard-only users can see their current focus.

Just add this to your CSS reset:

:focus { outline: none; }

:focus-visible { outline: revert; }