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

Copy
:focus-visible {
    /* declarations */
}

# Example

Copy
: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 Yes (86) Yes (85) No Yes (86) No Yes (72)
Mobile Yes (86) Yes (85) No Yes (86) No Yes (72)

# 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