CSS :focus-visible Pseudo-class

Definition and Usage

CSS :focus-visible Pseudo-classes that apply focus styles only when focused via keyboard, not via mouse focus.

This can be used with :focus Combined use, create different focus styles for keyboard focus and mouse/touch focus.

Example

Select and set the style for buttons that are focused via the keyboard Tab key:

button:focus-visible {
  outline: 2px solid red;
}

Try It Yourself

CSS Syntax

:focus-visible {
  css declarations;
}

Technical Details

Browser Support

The numbers in the table specify the first browser version that fully supports this pseudo-class.

Related Pages

Tutorial:CSS Pseudo-classes

Reference:CSS :focus pseudo-class