:invalid 의사 클래스
:invalid 의사 클래스는
잘못된 값이 입력되었거나 지정된 유형에
부적합한 값이 입력된 입력 필드의
스타일을 지정합니다.
문법
선택자:invalid {
}
예제
잘못된 값이 입력되면 입력 필드의 배경을 분홍색으로 변경하고, 선택된 유형에 대한 검증을 통과한 값이 입력되면 다시 초록색으로 변경해 봅시다:
<p>이메일을 입력하세요</p>
<p><input type="email"></p>
input:invalid {
background: #E37D76;
}
input:valid {
background: #9DDFA4;
}
:
함께 보기
-
올바른 값이 입력된 입력 필드의 스타일을 지정하는
:valid의사 클래스, -
기본값으로 선택된 요소의 스타일을 지정하는
:default의사 클래스, -
지정된 범위 내의 값을 가진 요소의 스타일을 지정하는
:in-range의사 클래스, -
지정된 범위를 벗어난 값을 가진 요소의 스타일을 지정하는
:out-of-range의사 클래스
