Lessons · HTML and CSS · :focus-visible, and a ring you can see
:focus-visible, and a ring you can see
:focus-visible matches only when the browser judges the ring useful -- keyboard yes, mouse click usually no.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
It is the answer to the complaint that started all this. Designers dislike the ring appearing on click; this gives them that without taking it away from anybody who needs it.
How to think about it
Draw a ring you chose. Give it an offset or two colours so it shows against light and dark, and check it against what is behind it -- an indicator is subject to contrast like anything else.
Worked example
button:focus-visible { outline: 3px solid #0055cc }Tab to the button and the browser reports outline-style 'solid' and outline-width 3px. There is something to see, and it is the one you chose.Your turn
The pseudo-class that shows a ring to the keyboard and not the mouse.
:focus-
Write a page and watch it render
The trap
A pale ring passes every automated check, because the outline is technically there. Look at it.