CSS의 :out-of-range 선택자는 min, max 속성으로 지정된 허용 범위를 벗어난 값을 가진 <input> 요소에 스타일을 적용하는 데 사용됩니다. 이 선택자는 특히 숫자 입력 필드에서 사용자가 허용 범위 밖의 값을 입력했을 때 시각적으로 경고 표시를 해주는 데 매우 유용합니다.
예제
다음 코드를 실행하여 :out-of-range 선택자의 동작을 직접 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
input:out-of-range {
border: 3px dashed orange;
background: yellow;
}
</style>
</head>
<body>
<input type = "number" min = "5" max = "10" value = "15">
<p>이 스타일은 입력된 값이 범위를 벗어난 경우에만 적용됩니다.</p>
</body>
</html>위 예제에서 입력 필드는 min="5", max="10"으로 허용 범위가 설정되어 있지만, 기본값이 15로 범위를 벗어났습니다. 따라서 주황색 점선 테두리와 노란색 배경 스타일이 자동으로 적용됩니다.
반대로 입력된 값이 5 이상 10 이하의 정상 범위 안에 있다면 이 스타일은 전혀 적용되지 않습니다. 참고로 범위 내에 있는 값을 대상으로 하는 :in-range 선택자도 함께 활용하면 더욱 직관적인 폼 유효성 피드백 UI를 만들 수 있습니다.