Pseudoklasa CSS :focus-visible wybiera element, który zostałby wybrany przez pseudoklasę :focus i algorytmy przeglądarki uznają, że jego gotowość do przyjmowania danych powinna zostać wyraźnie zaznaczona wizualnie.
Pseudoklasa ta została stworzona w odpowiedzi na problem związany z formatowaniem elementów w trybie gotowości do przyjmowania danych przez pseudoklasę :focus, która działa zawsze, niezależnie od jakichkolwiek warunków.
Pseudoklasa :focus-visible wybiera tylko te elementy, które algorytmy przeglądarki uznają za warte wyróżnienia. Pozwala to uniknąć nieestetycznego formatowania niektórych elementów formularza, takich jak na przykład przyciski.
Przykład użycia :focus-visible
W poniższym przykładzie selektor z pseudoklasą :focus-visible odnosi się do wszystkich elementów input, a mimo to przeglądarka doda obrys tylko do pierwszego z nich, który reprezentuje pole tekstowe. Przyciski z obrysem nie wyglądają zbyt atrakcyjnie, dlatego przeglądarka je pominie.
<style>
input:focus-visible {
outline: 2px solid green;
}
</style>
...
<input>
<input type="button" value="Wyślij">Efekt zastosowania tej reguły w przeglądarce:
Składnia
Składnia pseudoklasy :focus-visible:
:focus-visible {...}