:focus-visible

This selector is useful to provide a different focus indicator based on the user's input modality (mouse vs. keyboard).

Originally, user-agent CSS set focus styles based only on the :focus pseudo-class, styling most focused elements with a focus ring outline. This meant all elements, including all links and buttons, had a focus ring applied when focused, which many found ugly. Because of the appearance, some authors removed the user-agent outline focus styles. Changing focus style can negatively impact usability, while removing focus styles makes keyboard navigation inaccessible for sighted users.

Browsers no longer visibly indicate focus (such as by drawing a "focus ring"), around each element when it has focus. Instead, they use a variety of heuristics to provide focus indicators only when it would be most helpful to the user. For instance, when a button is clicked using a pointing device, the focus is generally not visually indicated, but when a text box needing user input has focus, focus is indicated. While focus styles are always required when users are navigating the page with the keyboard or when focus is managed via scripts, focus styles are not required when the user knows where they are putting focus, such as when they use a pointing device such as a mouse or finger to physically set focus on an element, unless that element continues to need user attention.

The :focus pseudo-class always matches the currently-focused element. The :focus-visible pseudo-class also matches the focused element, but only if the user needs to be informed where the focus currently is. Because the :focus-visible pseudo-class matches the focused element when needed, using the :focus-visible (instead of the :focus pseudo-class) allows authors to change the appearance of the focus indicator without changing when the focus indicator appears.

When the :focus pseudo-class is used, it always targets the currently focused element. This means that when a user employs a pointing device, a visible focus ring appears around the focused element, which some consider obtrusive. The :focus-visible pseudo-class respects user agents' selective focus indication behavior while still allowing focus indicator customization.

This example presents three pairs of controls. Each pair consists of a text input and a button.

• The first pair does not add any custom styles for focus states, and shows the default case.
• The second pair adds styles using the :focus pseudo-class.
• The third pair add styles using the :focus-visible pseudo-class.

<input type="text" value="Default styles" /><br />
<button>Default styles</button><br />

<input class="focus-only" type="text" value=":focus" /><br />
<button class="focus-only">:focus</button><br />

<input class="focus-visible-only" type="text" value=":focus-visible" /><br />
<button class="focus-visible-only">:focus-visible</button>

input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

If you click each element in turn, you will see that when :focus is used to style the focus ring, the UA draws the focus ring when the user clicks the button. However, when :focus-visible is used to style the focus ring, the UA does not draw the focus ring when the user clicks the button, just like in the default case.

If you then tab through each element, you will see that in all three cases — default, :focus, and :focus-visible — the UA draws the focus ring around the button when the user navigates to it with the keyboard.

This shows how :focus-visible enables a designer to follow the browser's logic in determining when a focus ring should be shown.

If your code has to work in old browser versions that do not support :focus-visible, check supports of :focus-visible with @supports and repeat the same focus styling in it, but inside a :focus rule. Note that even if you do not specify anything at all for :focus, old browsers will simply display the native outline, which can be enough.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">
  Button without fallback
</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.

• Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators

It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.

• :focus
• :focus-within
• A polyfill for :focus-visible