:focus-visible
Matches a focused element only when the browser decides the indicator should be visible, such as during keyboard navigation.
Example
#.btn:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}<p style="margin: 0 0 10px; color: #a1a1aa;">Click a button with the mouse, then press Tab.</p>
<div style="display: flex; gap: 8px;">
<button class="btn" type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff; font: inherit;">Save</button>
<button class="btn" type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #3f3f46; color: #fff; font: inherit;">Cancel</button>
</div>Definition and usage
#The :focus-visible pseudo-class is a smarter version of :focus. The browser judges for itself whether the user would benefit from a visible indicator. While tabbing with the keyboard it always matches, while after clicking a button with the mouse it usually doesnât, since in that case itâs already clear where the focus is.
Text fields are an exception: after a mouse click they match both :focus and :focus-visible, because the user is about to type on the keyboard and needs to see which field is active.
Thanks to this, you donât have to choose between looks and accessibility. You give your own, clear focus style in :focus-visible, and people clicking with a mouse donât see an outline on every button they click. Modern browsersâ default outline is also based on this pseudo-class.
Syntax
#selector:focus-visible { property: value; }Common uses
#- Click the button with the mouse: thereâs no outline. Now press Tab: it appears, because youâre navigating with the keyboard.
- For comparison, plain
:focus: in most browsers the outline also appears after a mouse click. - A text field matches even after a mouse click, because youâre about to type into it on the keyboard.
Common uses in practice
#input:focus-visible
input:focus-visible {
outline: 3px solid #a78bfa;
outline-offset: 2px;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Donât write
:focus { outline: none }. Browsers already show the default outline only on:focus-visible, and removing it strips orientation from people using a keyboard. - Pair hover effects with keyboard focus:
.link:hover, .link:focus-visible { ⊠}. - Pick a focus style that stays visible on any background. A thick outline with
outline-offsetworks better than a subtle color change.
Related entries
#- :focus vs :focus-visiblefocus matches any element that has focus, even after a mouse click. focus-visible only shows an indicator where the browser decides itâs actually needed.
- :focusMatches the element that has focus, meaning it currently receives keyboard input, such as a clicked form field.
- :focus-withinMatches an element that either has focus itself or contains an element with focus. Lets you highlight an entire form or card.
- :hoverMatches the element the mouse cursor is currently over. The basis of hover effects on buttons, links, and cards.
- :activeMatches an element at the moment itâs activated, most often while the mouse button is pressed down on a button or link.
- outlineDraws an outline around an element that doesnât take up space in the layout.
Spotted a mistake or missing an example? Write to us.