Skip to main content
CSS is fun and cool and I like it.
Almanac

:focus-visible

The :focus-visible pseudo-class (also known as the "Focus-Indicated" pseudo-class) is a native CSS way to style elements that:

  1. Are in focus
  2. Need a visible indicator to show focus (more on this later)

:focus-visible is used similarly to :focus: to bring attention to the element that currently has the focus.… Read article

Article

Keyboard-Only Focus Styles

Like Eric Bailey says, if it's interactive, it needs a focus style. Perhaps your best bet? Don't remove the dang outlines that focusable elements have by default. If you're going to rock a button { outline: 0; }, for example, then you'd better do a button:focus { /* something else very obvious visually */ }. I handled a ticket just today where a missing focus style was harming a user who relies on visual focus styles to … Read article

Link

`:focus-visible` and backwards compatibility