Pseudo-class focus-within

Pseudo-class focus-within mengatur gaya untuk elemen-elemen yang sedang dalam fokus. Berbeda dengan pseudo-class focus yang mengatur gaya secara langsung pada elemen itu sendiri, focus-within mengatur gaya untuk elemen induk.

Sintaks

selector:focus-within {

}

Contoh

Mari kita atur warna latar belakang biru untuk elemen induk, ketika elemen anak input-nya berada dalam fokus:

<div>
	Masukkan nama Anda: <input name="user">
</div>

div {
	width: 300px;
	height: 50px;
	padding: 10px;
}
div:focus-within {
	background-color: #C2DDFD;
}

Lihat juga

pseudo-class :indeterminate,
yang mengatur gaya untuk toggle yang berada dalam keadaan tidak tentu
pseudo-class :default,
yang mengatur gaya untuk elemen secara default
pseudo-class :fullscreen,
yang mengatur gaya untuk elemen dalam mode layar penuh
pseudo-class :placeholder-shown,
yang mengatur gaya untuk elemen saat teks placeholder ditampilkan
properti caret-color,
yang mengatur warna kursor teks di input