CSS 참조 설명서

CSS @규칙(RULES)

CSS 속성 전체

CSS :in-range 선택자

in-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:in-range
{
　　　　border:2px solid orange;
}
</><style
</><head
<body
<h3>:in-range 선택자 예제를 보여줍니다.</h3>
<input type="number" min="8" max="18" value="9"　/>
<p>input에 값을 입력하세요 (작은　8　또는 큰　18), 스타일의 변화를 확인하세요.</p>
</body>
</html>

테스트해 보세요 ‹/›

정의 및 사용

:in-range 선택자는 태그의 값이 지정된区间 값에 있을 때 표시되는 스타일을 정의합니다.

주의: 　:in-range 선택자는区间 값을 지정할 수 있는 요소에만 작용합니다. 예를 들어, <input> 요소의 min과 max 속성입니다.

브라우저 호환성

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

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

CSS 문법

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

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