CSS의 :out-of-range 선택자를 사용하면 지정된 범위(min, max 속성)를 벗어난 값을 가진 <input> 요소에 스타일을 적용할 수 있습니다.
이 선택자는 주로 숫자 입력 필드에서 사용자가 허용된 최솟값과 최댓값 사이를 벗어난 값을 입력했을 때 시각적으로 경고 표시를 해주는 데 유용합니다. 반대로 범위 내의 값에는 :in-range 선택자를 활용할 수 있습니다.
예제
다음 코드를 실행하여 :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 사이의 값을 입력하면 :out-of-range 조건에 더 이상 해당하지 않으므로 스타일이 사라집니다. 이를 응용하면 잘못된 입력값을 즉시 눈에 띄게 알려주는 폼 검증 UI를 쉽게 구현할 수 있습니다.