The :focus-withinsemu pemilih di CSS agak tidak biasa, meskipun baik-bernama dan agak intuitif. Ini memilih elemen jika elemen itu berisi anak-anak yang memilikinya :focus.
form:focus-within ( background: lightyellow; )Yang berfungsi seperti ini…
Saya mengatakan "tidak biasa" karena tidak umum di CSS untuk dapat memilih elemen induk berdasarkan keberadaan atau status elemen anak. Tentu berguna!
Berikut ini contoh formulir untuk mencobanya:
Lihat Pen Simple Responsive Form with: focus-inside oleh Chris Coyier (@chriscoyier) di CodePen.
Perhatikan bahwa contoh tersebut digunakan :focus-withinpada seluruh formulir dan pembungkusan masukan interior
Cara apa pun agar elemen anak dapat menjadi fokus akan memicu: fokus-dalam. Misalnya, jika sebuah elemen memiliki tab-indexatau contenteditableatribut, maka itu adalah elemen yang dapat difokuskan, dan akan berfungsi. Tidak peduli bagaimana elemen menjadi fokus. Ini bisa diklik atau diketuk, bisa saja di-tab atau dinavigasi dengan cara lain, atau bahkan difokuskan melalui JavaScript, seperti…
document.querySelector("input").focus();Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 60 | 52 | Tidak | 79 | 10.1 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |