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
Examples
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.
- Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
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.
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4The definition of ':focus-visible' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:focus-visible
|
Chrome Full support 86 Full support 86 Full support 67 Disabled' From version 67: this feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox Full support 4 Full support 4 Alternate Name' Uses the non-standard name: |
IE
No support No |
Opera Full support 54 Full support 54 Disabled' From version 54: this feature is behind the |
Safari
No support No |
WebView Android
Full support 86 |
Chrome Android Full support 86 Full support 86 Full support 67 Disabled' From version 67: this feature is behind the |
Firefox Android Full support 4 Full support 4 Alternate Name' Uses the non-standard name: |
Opera Android Full support 48 Full support 48 Disabled' From version 48: this feature is behind the |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Uses a non-standard name.'
- Uses a non-standard name.
See also
:focus-visible by Mozilla Contributors is licensed under CC-BY-SA 2.5.