CSS의 :in-range 선택자는 <input> 요소의 값이 지정된 범위(최솟값~최댓값) 안에 있을 때 해당 요소에 스타일을 적용하는 데 사용됩니다. 주로 type="number"처럼 min과 max 속성을 지원하는 입력 필드와 함께 활용되며, 사용자가 입력한 값이 유효 범위 내에 있는지 시각적으로 피드백을 제공하는 데 매우 유용합니다.
예제
다음 코드를 실행하여 :in-range 선택자의 동작을 직접 확인해 보세요.
<!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이므로 범위(5~10) 내에 해당하여 스타일이 적용됩니다.</p>
</body>
</html>
동작 원리
위 예제에서 입력 필드는 min="5", max="10"으로 설정되어 있습니다. 현재 값이 9이므로 지정된 범위 안에 포함되어 :in-range 선택자가 적용되며, 주황색 점선 테두리와 노란색 배경이 화면에 표시됩니다.
반대로 값이 5 미만 또는 10 초과라면 이 스타일은 적용되지 않습니다. 이런 경우에는 :out-of-range 선택자를 함께 사용하면 범위를 벗어난 값에 대해 별도의 경고 스타일을 지정할 수 있어, 폼 유효성 검사 시 사용자 경험을 크게 향상시킬 수 있습니다.