Pseudoclass in-range

Pseudoclass in-range thiết lập kiểu dáng cho các phần tử mà giá trị của chúng nằm trong một phạm vi nhất định. Phạm vi giá trị phải được xác định bằng các thuộc tính min và max.

Cú pháp

bộ chọn:in-range {

}

Ví dụ

Hãy đặt màu nền xanh da trời cho trường nhập liệu khi giá trị số được nhập vào nằm trong phạm vi từ 1 đến 5. Đồng thời, đặt nền màu hồng khi giá trị nhập vào không nằm trong giới hạn đã chọn:

<form>
	<p>Nhập số từ 1 đến 5</p>
	<p>
		<input type="number" min="1" max="5" value="1">
	</p>
</form>

input:in-range {
	background: #C2DDFD;
}
input:out-of-range {
	background: #E37D76;
}

Xem thêm

pseudoclass :out-of-range,
thiết lập kiểu dáng cho các phần tử có giá trị vượt ra ngoài phạm vi
pseudoclass :valid,
thiết lập kiểu dáng cho trường nhập liệu khi giá trị nhập vào là hợp lệ
pseudoclass :invalid,
thiết lập kiểu dáng cho trường nhập liệu khi giá trị nhập vào là không hợp lệ