유효(valid) 의사 클래스
의사 클래스 valid는 올바른 값이 입력되었거나 지정된 타입에 맞는 값이 입력된 인풋 요소의 스타일을 지정합니다.
문법
선택자:valid {
}
예제
잘못된 값이 입력되면 인풋 배경을 분홍색으로, 검증을 통과한 올바른 값이 입력되면 다시 녹색으로 바꿔봅시다:
<p>이메일을 입력하세요</p>
<p><input type="email"></p>
input:invalid {
background: #E37D76;
}
input:valid {
background: #9DDFA4;
}
:
참고 항목
-
잘못된 값이 입력된 인풋에 스타일을 지정하는 의사 클래스
:invalid -
값이 지정된 범위를 벗어나는 요소에 스타일을 지정하는 의사 클래스
:out-of-range -
지정된 값 범위 내에 있는 요소에 스타일을 지정하는 의사 클래스
:in-range
