out-of-range 의사 클래스

의사 클래스 out-of-range는 지정된 범위를 벗어난 값을 가진 요소의 스타일을 정의합니다. 값의 범위는 min 및 max 속성으로 지정해야 합니다.

구문

css선택자:out-of-range {
  
}

예시

입력 필드에 1에서 5 사이의 숫자가 입력될 때 파란색 배경을 지정하고, 선택한 한계를 벗어난 값이 입력될 때는 분홍색 배경을 설정해 보겠습니다:

html<form>
  <p>1에서 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;
}

Результат:

관련 항목