CSS :focus-visible Pseudo-class

Definition and Usage

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

This can be used with :focus Combine them to create different focus styles for keyboard focus and mouse/touch focus.

Example

Select and set the style of buttons that are focused through 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.

Vingine vya muhimu

Mafunzo:Hisia ya pengine

Tazama:Hisia :focus