Pseudo-class focus-within

Pseudo-class focus-within thiết lập kiểu dáng cho các phần tử đang trong trạng thái tiêu điểm. Khác với pseudo-class focus, định dạng trực tiếp cho chính phần tử đó, focus-within thiết lập kiểu dáng cho phần tử cha.

Cú pháp

bộ chọn:focus-within {

}

Ví dụ

Hãy thiết lập màu nền xanh da trời cho phần tử cha, khi phần tử con là input đang trong tiêu điểm:

<div>
	Nhập tên của bạn: <input name="user">
</div>

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

Xem thêm

pseudo-class :indeterminate,
thiết lập kiểu dáng cho các công tắc ở trạng thái không xác định
pseudo-class :default,
thiết lập kiểu dáng cho các phần tử mặc định
pseudo-class :fullscreen,
thiết lập kiểu dáng cho các phần tử ở chế độ toàn màn hình
pseudo-class :placeholder-shown,
thiết lập kiểu dáng cho phần tử khi văn bản gợi ý được hiển thị
thuộc tính caret-color,
thiết lập màu sắc cho con trỏ văn bản trong input