유효(valid) 의사 클래스

의사 클래스 valid는 올바른 값이 입력되었거나 지정된 타입에 맞는 값이 입력된 인풋 요소의 스타일을 지정합니다.

문법

css선택자:valid {
  
}

예제

잘못된 값이 입력되면 인풋 배경을 분홍색으로, 검증을 통과한 올바른 값이 입력되면 다시 녹색으로 바꿔봅시다:

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

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

Результат:

참고 항목