Den :focus-withinpseudo väljaren i CSS är lite ovanligt, men väl namngivna och ganska intuitiv. Det väljer ett element om det elementet innehåller några barn som har :focus.
form:focus-within ( background: lightyellow; )Vilket fungerar så här ...
Jag sa "ovanligt" eftersom det inte är vanligt i CSS att kunna välja ett överordnat element baserat på existensen eller tillståndet hos underordnade element. Visst är det dock användbart!
Här är ett exempelformulär för att prova det:
Se Pen Simple Responsive Form med: focus-inside av Chris Coyier (@chriscoyier) på CodePen.
Observera att exemplet används :focus-withinpå hela formuläret och på inmatning av inredning
Något sätt som ett barnelement kan bli fokuserat kommer att utlösa: fokus-inuti. Till exempel, om ett element har ett tab-indexeller contenteditableattribut, är det ett fokuserat element och fungerar. Det spelar ingen roll hur elementet blev fokuserat. Det kunde klickas eller tryckas, det kunde ha flikats till eller navigerats till på något annat sätt, eller till och med fokuserat genom JavaScript, som ...
document.querySelector("input").focus();Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 60 | 52 | Nej | 79 | 10.1 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |