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
. See the :-moz-focusring
page for more details.
Syntax not found in DB!
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>
.
<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; }
You can polyfill :focus-visible
using focus-visible.js.
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
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of ':focus-visible' in that specification. | Working Draft | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 67
|
No | No | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | 67
|
No | No | No | No | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible