:invalid 의사 클래스

:invalid 의사 클래스는 잘못된 값이 입력되었거나 지정된 유형에 부적합한 값이 입력된 입력 필드의 스타일을 지정합니다.

문법

css선택자:invalid {

}

예제

잘못된 값이 입력되면 입력 필드의 배경을 분홍색으로 변경하고, 선택된 유형에 대한 검증을 통과한 값이 입력되면 다시 초록색으로 변경해 봅시다:

html<p>이메일을 입력하세요</p>
<p><input type="email"></p>

cssinput:invalid {
  background: #E37D76;
}
input:valid {
  background: #9DDFA4;
}

Результат:

함께 보기