:focus-visible

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

:focus-visible

In this example, the :focus-visible selector uses the UA's behavior to determine when to match. Compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. Note the difference in behavior from elements styled with :focus.

<input value="Default styles"><br>
<button>Default styles</button><br>
<input class="focus-only" value=":focus only"><br>
<button class="focus-only">:focus only</button><br>
<input class="focus-visible-only" value=":focus-visible only"><br>
<button class="focus-visible-only">:focus-visible only</button>

input, button {
  margin: 10px;
}

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

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

A custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus. This matches the native focus behavior for controls like <button>.

<button class="custom-button">Click Me</button>

.custom-button {
  display: inline-block;
  margin: 10px;
}

.custom-button:focus {
  /* Provide a fallback style for browsers
     that don't support :focus-visible */
  outline: 2px solid red;
  background: lightgrey;
}

@supports selector(:focus-visible) {
  .custom-button:focus {
    /* Remove the focus indicator on mouse-focus for browsers
       that do support :focus-visible */
    outline: none;
    background: transparent;
  }
}

.custom-button:focus-visible {
  /* Draw a very noticeable focus style for
     keyboard-focus on browsers that do support
     :focus-visible */
  outline: 4px dashed darkorange;
  background: transparent;
}

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