CSS :out-of-range

The :out-of-range pseudo-class matches input controls whose current value is outside the allowed range set by attributes such as min and max.

Syntax

input:out-of-range {
  border-color: #ef4444;
}

Example

input:out-of-range {
  border: 2px solid #ef4444;
}

input:in-range {
  border: 2px solid #22c55e;
}

Important note

This is a pseudo-class, so it uses one colon: :out-of-range. The double-colon form ::out-of-range is incorrect.