Pseudo class out-of-range

Pseudo class out-of-range xác định kiểu dáng cho các phần tử có giá trị vượt ra ngoài phạm vi được chỉ định. Phạm vi giá trị phải được xác định bởi các thuộc tính min và max.

Cú pháp

cssbộ chọn:out-of-range {
  
}

Ví dụ

Hãy đặt màu nền xanh lam cho trường nhập, nơi nhập các số nằm trong phạm vi từ 1 đến 5. Đồng thời, chúng ta sẽ đặ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:

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

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

Результат:

Xem thêm