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.
# 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)
For future browser support information, also check out caniuse.com (Focus indicated pseudo-class).
# 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...