Den :focus-withinpseudo velgeren i CSS er litt uvanlig, men godt navngitt og heller intuitivt. Det velger et element hvis elementet inneholder barn som har :focus.
form:focus-within ( background: lightyellow; )Som fungerer slik ...
Jeg sa "uvanlig" fordi det ikke er vanlig i CSS å kunne velge et overordnet element basert på eksistensen eller tilstanden til underordnede elementer. Visst er nyttig skjønt!
Her er et eksempel på skjema for å prøve det:
Se pennens enkle responsive skjema med: focus-inside av Chris Coyier (@chriscoyier) på CodePen.
Merk at eksemplet bruker :focus-withinpå hele skjemaet og på innvendig innpakning
Enhver måte som et barneelement kan bli fokusert på vil utløse: fokus-innenfor. For eksempel, hvis et element har et tab-indexeller contenteditableattributt, er det et fokuserbart element, og fungerer. Det spiller heller ingen rolle hvordan elementet ble fokusert. Det kunne klikkes eller trykkes på, det kunne ha blitt fanet til eller navigert til på noen annen måte, eller til og med fokusert gjennom JavaScript, som ...
document.querySelector("input").focus();Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 60 | 52 | Nei | 79 | 10.1 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |