:in-range 의사 클래스
<in-range> 의사 클래스는 값이 특정 범위 내에 지정된 요소에 스타일을 적용합니다. 값의 범위는 <min> 및 <max> 속성으로 설정해야 합니다.
구문
선택자:in-range {
}
예제
<1>부터 <5>까지의 범위에 들어가는 숫자를 입력하는 input 필드의 배경을 하늘색으로 설정해 보겠습니다. 또한 입력된 값이 선택한 한계를 벗어날 때는 분홍색 배경을 설정합니다:
<form>
<p>1부터 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;
}
:
참고 항목
-
값이 범위를 벗어나는 요소에 스타일을 적용하는 <
:out-of-range> 의사 클래스 -
올바른 값을 입력한 input 필드에 스타일을 적용하는 <
:valid> 의사 클래스 -
잘못된 값을 입력한 input 필드에 스타일을 적용하는 <
:invalid> 의사 클래스
