:focus-visible Pseudo-Class

CSS :focus-visible Pseudo-Class

The CSS :focus-visible pseudo-class selects a focused element when the browser determines that a visible focus indicator should be displayed. It can provide clear keyboard focus styles without necessarily showing the same focus indicator for every interaction method.

The :focus-visible Pseudo-Class

The :focus-visible pseudo-class is added directly to a selector with no space between the selector and the colon.

button:focus-visible {
  outline: 3px solid #0088cc;
}

The selector button:focus-visible matches a focused <button> when the browser determines that a visible focus indicator should be shown.

How :focus-visible Works

An element can have focus without necessarily matching :focus-visible. The browser uses built-in rules to determine whether a visible focus indicator is appropriate for the current interaction.

Keyboard interaction commonly causes :focus-visible to match because keyboard users need a visible indication of where focus is located. The exact behavior is determined by the browser rather than by CSS detecting a particular input device.

:focus vs :focus-visible

The :focus and :focus-visible pseudo-classes are related, but they do not mean exactly the same thing.

button:focus {
  background-color: #f5f5f5;
}

button:focus-visible {
  outline: 3px solid #0088cc;
}

A button may match :focus whenever it has focus, while :focus-visible depends on whether the browser determines that the focused state should receive a visible indicator.

Keyboard Focus

One of the most important uses of :focus-visible is providing a clear indicator as users move through interactive elements with a keyboard.

a:focus-visible,
button:focus-visible {
  outline: 3px solid #0088cc;
  outline-offset: 2px;
}

As keyboard focus moves between matching links and buttons, the outline makes the currently focused element easier to identify.

Using :focus-visible with Buttons and Links

Buttons and links are common candidates for :focus-visible because users frequently move between these elements with the keyboard.

a:focus-visible {
  outline: 2px solid #0088cc;
  outline-offset: 2px;
}

button:focus-visible {
  outline: 2px solid #0088cc;
  outline-offset: 2px;
}

<a href="/contact.html">Contact Us</a>
<button type="button">Learn More</button>

These rules provide a visible outline when the browser determines that focus should be visibly indicated.

Using :focus-visible with Form Controls

The :focus-visible pseudo-class can also style form controls when a visible focus indicator is appropriate.

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #0088cc;
  outline-offset: 2px;
}

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Text-entry controls may continue to receive a visible focus indication even when they are clicked because the browser considers the type of element and the interaction when deciding whether :focus-visible should match.

Creating a Visible Focus Indicator

A focus indicator should be easy to distinguish from the surrounding page. The outline property is useful because it can emphasize an element without changing the space occupied by the element.

:focus-visible {
  outline: 3px solid #0088cc;
  outline-offset: 3px;
}

The outline-offset property adds space between the outline and the edge of the element, which can make the indicator easier to see.

Avoid removing a browser's focus indicator unless another clearly visible focus style is provided.

Focus Visibility and Accessibility

People who navigate with a keyboard need to know which element currently has focus. A visible focus indicator provides that information as they move through links, buttons, form controls, and other interactive elements.

The :focus-visible pseudo-class can help provide prominent focus styling when the browser determines that the user needs a visible focus indicator, while avoiding unnecessary focus decoration in some other interactions.

Do not use :focus-visible as a reason to hide focus indiscriminately. The goal is to preserve a clear indication of focus whenever users need it.

When to Use :focus-visible

Use :focus-visible when you want to provide a clear focus indicator while allowing the browser to determine when that indicator should be displayed. It is especially useful for interactive controls that may receive focus through different forms of user interaction.

Use :focus when styles should apply whenever an element has focus, regardless of whether the browser determines that a visible focus indicator is needed.

Summary

The CSS :focus-visible pseudo-class matches a focused element when the browser determines that a visible focus indicator should be displayed. It is particularly useful for creating clear keyboard focus styles while allowing the browser to account for different forms of interaction.

The next tutorial covers the :active pseudo-class, which can style an element while it is being activated by the user.