CSS :focus-visible Pseudo-class
Example
Select and style a button that gets focus with keyboard tab:
button:focus-visible {
outline: 2px solid red;
}
Try it Yourself »
Definition and Usage
The :focus-visible pseudo-class
is used to apply focus styles only when the keyboard is used to focus something,
not the mouse.
This can be used with :focus to create
different focus styles for keyboard focus and mouse/touch focus.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the pseudo-class.
| Pseudo-class | |||||
|---|---|---|---|---|---|
| :focus-visible | 86 | 86 | 85 | 15.4 | 72 |
CSS Syntax
:focus-visible {
css declarations;
}
Related Pages
CSS tutorial: CSS Pseudo classes
CSS reference: :focus
