Trên trang này

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a “focus ring” by default in this case.)

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

Note that Firefox supports similar functionality through an older, prefixed pseudo-class — :-moz-focusring.

Syntax

:focus-visible

Example

Basic example

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.

Selectively showing the focus indicator

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>.

Polyfill

Accessibility concerns

Low vision

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.

Cognition

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.