CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성大全

CSS :out-of-range 선택자

:out-of-range CSS伪类은 min과 max 속성으로 제한된 <input> 요소의 현재 값이 범위 밖에 있을 때를 나타냅니다. 주의: 이伪클래스는 값 범위를 설정할 수 있는 요소에만 적용됩니다. 이 설정이 부족하면 요소 값은 'in'이라는 의미가 없습니다.-range”와 “out-range”

전체 CSS 선택자 참조 매뉴얼

온라인 예제

지정된 범위 밖에 있는 값을 입력할 때 지정된 스타일을 설정합니다:

예제

<!DOCTYPE html
<html
<head
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>/><title　
<style
input:out-of-range
{
　　　　border:2px solid blue;
}
</><style
</><head
<body
<h3> :out-of-range 선택자 예제를 보여줍니다.</h3>
<input type="number" min="8" max="18" value="20"　/>
<p>input에 값을 입력하세요 (작은　8　또는 큰　18), 스타일의 변경을 확인하세요.</p>
</body>
</html>

시험해 보세요 ‹/›

정의 및 사용

:out-of-range 선택자는 태그의 값이 지정된 범위 밖에 있을 때 표시되는 스타일을 정의합니다.

주의: 　:out-of-range 선택자는 범위를 지정할 수 있는 값이 있는 요소에만 작용합니다. 예를 들어, input 요소의 min과 max 속성입니다.

브라우저 호환성

표에서의 숫자는 해당 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

선택자
:out-of-range	10.0	지원하지 않음	28.0	5.2	11.0

CSS 문법

/*　이伪클래스는 어떤 <input> 요소를 선택할 수 있지만, 해당 요소가 값 범위를 지정했으며 요소 값이 지정된 범위에 있을 때만 유효합니다.　*/
input:out-of-range {
　　background-color: rgba(255, 0, 0, 0.25);
}

이伪클래스는 사용자에게 입력 필드의 현재 값이 허용 범위 밖에 있음을 시각적으로 표시하는 데 사용됩니다.