How do :focus-visible and :focus style keyboard focus differently?

Both selectors apply to elements that have focus. :focus matches whenever an element has focus. :focus-visible matches when the browser determines that focus should be visibly indicated. So an element can have focus without matching :focus-visible; the selector is more selective about when its styling applies. [S1]

For a visible indicator, you could start with:

.control:focus-visible {
  outline: 3px solid #175cd3;
  outline-offset: 3px;
}

This is an example appearance, not a guarantee that these colors or dimensions suit every control. Check that the indicator is easy to see in your design. [S2]

Use :focus if you intend to style every focused state. Use :focus-visible for a style when the browser identifies a visible focus indicator as appropriate. The distinction does not mean the control lacks focus when it does not match :focus-visible. [S1]

Standard focusable elements may already have browser focus styling. Check your custom control too: custom focusable components need focus styling. Avoid removing an outline if it is the only visible indication; if you change the styling, keep a visible indicator. [S2]

For example, this applies the same treatment to both kinds of control when they match :focus-visible:

button:focus-visible,
.custom-control:focus-visible {
  outline: 3px solid #175cd3;
  outline-offset: 3px;
}

Try the actual controls on the page, including the custom one:

1. Use the keyboard to move through the controls. Check that you can see which one currently has focus.
2. Continue through the custom control and any components with reset or custom styles. Look for rules that remove the only visible focus indication. [S2]
3. Use a pointer with the controls and observe whether :focus-visible styling appears. The browser determines when the selector matches, so do not assume pointer and keyboard interactions produce identical results. [S1]

If a control is hard to locate during the keyboard check, review its focus styling and repeat the check. This is a practical review of the component, not proof that an entire interface has been evaluated.

Start with a visible style for the component’s focused state, such as:

.component:focus-visible {
  outline: 3px solid #175cd3;
  outline-offset: 3px;
}

Then check the component in context. The key distinction is that :focus matches focused elements generally, while :focus-visible applies when the browser considers a visible indication appropriate. [S1]

Checklist:

1. Identify the standard and custom controls that can receive focus.
2. Check that focused controls have a visible indicator; do not remove the only one. [S2]
3. Navigate through the controls by keyboard and confirm the active control is easy to locate.
4. Check pointer interactions and review any styles that reset outlines.
5. Repeat the checks on custom controls and components with their own styles.

Treat the example as a starting point: check the appearance on your actual controls and page.