CSS 참조 설명서

CSS @규칙(RULES)

CSS 속성 전체 목록

CSS 함수(Function)CSS 선택자 전체 매뉴얼

CSS :invalid 선택자

:invalid CSS伪클래스는 검증을 통과하지 않은 어떤 내용도 포함한 <input> 또는 다른 <form> 요소를 나타냅니다.

　완전한 CSS 선택자 참조 가이드

온라인 예제

input 요소의 값이 불법적이면 스타일을 파란색으로 설정합니다:

예제

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>기본 가이드(oldtoolbag.com)</title>　
<style>
input:invalid
{
　　　　border:2px solid blue;
}
</style>
</head>
<body>
<h3> :invalid 선택자 예제를 보여주세요.</h3>
<input type="email" value="supportEmail"　/>
<p>법적 e-이메일 주소를 입력하면 스타일 변화를 확인할 수 있습니다.</p>
</body>
</html>

시험해보세요 ‹/›

정의 및 사용

:invalid 선택자는 폼 요소의 값이 불법적이면 지정된 스타일을 설정하는 데 사용됩니다.

주의: 　:invalid 선택자는 값을 지정할 수 있는 요소에만 작용합니다. 예를 들어, input 요소의 min과 max 속성, 올바른 email 필드, 합법적인 숫자 필드 등.

브라우저 호환성

표中之 수치는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

선택자
:invalid	10.0	10.0	4.0	5.0	10.0

CSS 사용 문법

/*　옵션적으로 어떤 불법적인<input>을 선택할 수 있습니다.　*/
input:invalid　{
　　background-color:  rose;
}

이伪클래스는 사용자 필드의 오류를 강조하는 데 매우 유용합니다.