CSS :invalid pseudo 클래스

정의 및 사용법

CSS :invalid pseudo 클래스는 invalid 양식 요소의 스타일을 설정합니다。

주의:이 pseudo 클래스는 제한된 양식 요소에만 적용됩니다. 예를 들어, min 및 max 속성을 가진 입력 요소, 유효한 이메일이 없는 이메일 필드 또는数值가 없는 숫자 필드 등입니다.

주의:단일 선택 버튼 그룹에서 어떤 선택 버튼이 필수이면, 그룹에 어떤 선택 버튼도 선택되지 않았을 때, 이 pseudo 클래스가 모든 선택 버튼에 적용됩니다。

안내:사용 :valid pseudo 클래스는 유효한 양식 요소의 스타일을 설정합니다。

예제

无效的 <fieldset> 및 <input> 요소의 스타일을 설정합니다：

fieldset:invalid {
  border: 2px solid red;
  background-color: beige;
}
input:invalid {
  border: 2px solid red;
  background-color: beige;
}

자신의 손으로 시도해 보세요

CSS 문법

:invalid {
  css 선언;
}

기술 세부 사항

버전： CSS4

브라우저 지원

표格에 나타난 숫자는 이伪类를 최초로 지원하는 브라우저 버전을 나타냅니다。

크롬 에지 파이어폭스 사파리 오페라
10 12 4 5 10

관련 페이지

참조:CSS :valid 선택자