Our volunteers haven't translated this article into Română yet. Join us and help get the job done!
You can also read the article in English (US).

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA 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.

<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;
}

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

<custom-button tabindex="0" role="button">Click Me</custom-button>
custom-button {
  display: inline-block;
  margin: 10px;
}

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

custom-button:focus:not(:focus-visible) {
  /* Remove the focus indicator on mouse-focus for browsers
     that do support :focus-visible */
  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;
}

Polyfill

You can polyfill :focus-visible using focus-visible.js.

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

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':focus-visible' in that specification.
Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:focus-visible
Experimental
Chrome Full support 67
Disabled
Full support 67
Disabled
Disabled From version 67: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox Full support 4
Alternate Name
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :-moz-focusring
IE No support NoOpera Full support 54
Disabled
Full support 54
Disabled
Disabled From version 54: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari No support NoWebView Android No support NoChrome Android Full support 67
Disabled
Full support 67
Disabled
Disabled From version 67: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 4
Alternate Name
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :-moz-focusring
Opera Android Full support 48
Disabled
Full support 48
Disabled
Disabled From version 48: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

See also

Document Tags and Contributors

Last updated by: ericwbailey,