The :focus-withinpemilih pseudo dalam CSS adalah agak luar biasa, walaupun yang dinamakan dan agak intuitif. Ia memilih elemen jika elemen itu mengandungi kanak-kanak yang mempunyai :focus.
form:focus-within ( background: lightyellow; )Yang berfungsi seperti ini ...
Saya mengatakan "tidak biasa" kerana tidak biasa dalam CSS untuk dapat memilih elemen induk berdasarkan kewujudan atau keadaan elemen anak. Pasti berguna walaupun!
Berikut adalah borang contoh untuk mencubanya:
Lihat Borang Responsif Pen Mudah dengan: fokus-oleh Chris Coyier (@chriscoyier) di CodePen.
Perhatikan bahawa contoh digunakan :focus-withinpada keseluruhan borang dan pembungkus input dalaman
Sebarang cara elemen kanak-kanak menjadi fokus akan mencetuskan: fokus-dalam. Sebagai contoh, jika elemen mempunyai tab-indexatau contenteditableatribut, maka itu adalah elemen yang dapat difokuskan, dan akan berfungsi. Ia juga tidak kira bagaimana elemen itu menjadi fokus. Ini dapat diklik atau diketuk, bisa disisipkan ke atau dinavigasi ke dengan cara lain, atau bahkan difokuskan melalui JavaScript, seperti
document.querySelector("input").focus();Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 60 | 52 | Tidak | 79 | 10.1 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |