CSS Selector Level 4 » Focus indicated pseudo-class

This pseudo-class is called focus-indicated pseudo-class and matches every element which matches :focus and the browser decides if the focus should be made evident on the matched element.

# Syntax

:focus-visible {
    /* declarations */

# Example

:focus-visible {
    border-color: blue;

In this example the input will have a blue border-color when focused since inputs usually have browser based focus indicators.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop No No No No No No
Mobile No No No No No No

# Usage statistics (Alexa Top 1,250,000 sites)

Due to an extreme price increase of our statistics provider the data collection was stopped in September 2018.

Please wait a moment, the comments start loading now...
explorermozillachromesafariopera info external