:focus-within
Pasuje do elementu, który sam ma fokus albo zawiera element z fokusem. Pozwala wyróżnić cały formularz lub kartę.
Przykład
#.search {
border: 1px solid #3f3f46;
transition: border-color 0.2s, box-shadow 0.2s;
}
.search:focus-within {
border-color: #a78bfa;
box-shadow: 0 0 0 3px rgb(167 139 250 / 0.3);
}<label class="search" style="display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #18181b;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#a1a1aa" stroke-width="2.5" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>
<input placeholder="Szukaj w dokumentacji" style="flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit;">
</label>Kliknij w pole. Obwódkę dostaje cały kontener z ikoną, więc samo pole może być bez ramki.
Definicja i zastosowanie
#Pseudoklasa :focus-within przenosi informację o fokusie w górę drzewa. Pasuje do elementu z fokusem i do wszystkich jego przodków. Formularz z :focus-within zmieni wygląd, gdy tylko użytkownik kliknie którekolwiek z jego pól.
To prosty sposób na podświetlenie całej grupy: wiersza formularza, pola wyszukiwania z ikoną czy karty z przyciskami. Wcześniej takie efekty wymagały JavaScriptu.
Działa przy każdym rodzaju fokusu, także po kliknięciu myszą. Jeśli chcesz reagować tylko na fokus z klawiatury, połącz :has() z :focus-visible: .card:has(:focus-visible).
Składnia
#selektor:focus-within { właściwość: wartość; }Typowe zastosowania
#- Kliknij dowolne pole: podświetla się cały formularz.
- Podświetla się tylko etykieta, w której leży aktywne pole.
- Formularz jest przygaszony, dopóki nie klikniesz w któreś z pól.
.demo:focus-within label:not(:focus-within)
Tryb skupienia: gdy piszesz w jednym polu, drugie blednie.
Typowe zastosowania w praktyce
#.demo:focus-within
.demo:focus-within {
background: rgb(124 58 237 / 0.2);
outline: 2px solid #a78bfa;
}label:focus-within
label:focus-within { color: #fbbf24; }.demo:not(:focus-within)
.demo:not(:focus-within) { opacity: 0.55; }.demo:focus-within label:not(:focus-within)
.demo:focus-within label:not(:focus-within) { opacity: 0.4; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Gdy ukrywasz obwódkę pola wewnątrz większego komponentu, pokaż fokus na całym komponencie przez
:focus-within. Wskaźnik musi zostać widoczny. - Menu rozwijane otwierane najechaniem (
:hover) otwieraj też przez:focus-within. Wtedy da się z nich korzystać klawiaturą.
Powiązane hasła
#- :focusPasuje do elementu, który ma fokus, czyli przyjmuje teraz dane z klawiatury, np. do klikniętego pola formularza.
- :focus-visiblePasuje do elementu z fokusem wtedy, gdy przeglądarka uzna, że wskaźnik powinien być widoczny, np. przy nawigacji klawiaturą.
- :has()Wybiera element na podstawie tego, co zawiera lub co stoi za nim. Pozwala stylować rodzica według jego dzieci.
- :hoverPasuje do elementu, nad którym znajduje się kursor myszy. Podstawa efektów najechania na przyciski, linki i karty.
- :invalidPasuje do pól formularza, których wartość łamie reguły walidacji HTML, np. do pustego pola wymaganego albo błędnego adresu e-mail.
Widzisz błąd albo brakuje przykładu? Napisz do nas.