CSS의 :in-range 선택자를 사용하면 min과 max 속성으로 정의된 허용 범위 안에 있는 값을 입력한 <input> 요소에만 특정 스타일을 적용할 수 있습니다.
이 선택자는 주로 type="number", 슬라이더 등 값의 범위가 지정된 입력 필드에서 유용하게 활용됩니다. 사용자가 유효한 범위 내의 값을 입력했을 때 시각적인 피드백을 제공하여 폼의 사용성을 높일 수 있습니다.
:in-range 선택자 예제
아래 코드는 5부터 10 사이의 값만 허용하는 숫자 입력 필드에 :in-range 선택자를 적용한 예입니다. 현재 값이 9이므로 범위 내에 해당되어 주황색 점선 테두리와 노란색 배경 스타일이 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
input:in-range {
border: 3px dashed orange;
background: yellow;
}
</style>
</head>
<body>
<input type = "number" min = "5" max = "10" value = "9">
<p>입력된 값이 9이므로 범위 내에 해당할 때만 이 스타일이 적용됩니다.</p>
</body>
</html>참고: :out-of-range 선택자
반대로, 지정된 범위를 벗어난 값이 입력된 경우에 스타일을 적용하려면 :out-of-range 선택자를 사용하면 됩니다. 두 선택자를 함께 활용하면 유효한 값과 잘못된 값을 색상으로 구분해 사용자에게 직관적으로 알려줄 수 있습니다.