CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS :valid 선택자

온라인 예제

input 요소에 입력된 값이 유효하면, 그 값을 노란색으로 설정합니다:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>기본 가이드(oldtoolbag.com)</title>　
<style>
input:valid
{
　　　　background-color: yellow;
}
</style>
</head>
<body>
<h3> :valid 선택자 예제를 보여줍니다.</h3>
<input type="email" value="[email protected]">　/>
<p>비법적 e-이메일 주소를 입력하여 스타일 변화를 확인하세요.</p>
</body>
</html>

테스트해 보세요 ‹/›

정의 및 사용

:valid 선택자는 양식 요소의 값이 지정된 조건에 따라 검증할 때 스타일을 설정합니다.

주의: 　:valid 선택자는 특정 범위 값을 지정할 수 있는 요소에만 적용됩니다. 예를 들어, input 요소의 min과 max 속성, 올바른 email 필드, 유효한 숫자 필드 등.

브라우저 호환성

표에서의 숫자는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

선택자
:valid	10.0	10.0	4.0	5.0	10.0

CSS 문법

:valid
{
　　　　css　표현;
}