resumemaker.eu
← TechnologyThe essentials of

focus-visible: visible focus when working with a keyboard

Publisher: ResumeMaker • 1 source

Published: 22 Oct 2026 13:13 · Updated: 22 Oct 2026 13:13

AI source check: 21 Oct 2026 10:36. This is not editorial approval.

In a few sentences

In brief

The selector allows a style of focus according to the browser's judgment that the indicator should be visible.

Useful to know

:focus-visible matches a focused element when the browser determines that a visible focus designation is needed. This helps, for example, with keyboard navigation. It is not just another name for :focus: the two selectors express different conditions. [1]

Initial button style is button:focus-visible { outline: 3px solid #075985; outline-offset: 3px; }. The color and thickness are exemplary; check them on the real page backgrounds.

Removing outline without a substitute can leave the person without a guide as to which control will be triggered. Browse the Tab and Shift+Tab, page including menus and dialogues. If the component receives focus but does not have a clearly visible state, the problem is not solved with an added selector alone. Contrast, cut from a container, and the location of the indicator are also important.

Sources

For further detail and to check the information:

  1. [1] MDN — :focus-visible ↗