CSS의 :valid 선택자를 사용하면 유효한(valid) 값을 가진 모든 <input> 요소에 원하는 스타일을 간편하게 적용할 수 있습니다. 이 선택자는 입력 필드의 값이 해당 타입의 유효성 검사 규칙(예: 이메일 형식)을 통과했을 때 자동으로 매칭됩니다.
예제
다음 코드를 실행하면 :valid 선택자가 실제로 어떻게 동작하는지 확인할 수 있습니다:
<!DOCTYPE html>
<html>
<head>
<style>
input:valid {
background: red;
color: white;
}
</style>
</head>
<body>
<h2>Heading</h2>
<input type = "email" value = "amit@example.com">
<p>The style (red color background) appears if you type a relevant/ valid email address.</p>
</body>
</html>실행 결과
위 코드를 실행하면 이메일 주소가 올바른 형식으로 입력되어 있을 때 배경이 빨간색으로, 글자는 흰색으로 표시됩니다. 반대로 유효하지 않은 이메일 형식을 입력하면 해당 스타일이 사라지므로, 사용자에게 입력값의 정확성을 시각적으로 즉시 피드백할 수 있습니다.
참고로 :valid 선택자와 반대 개념인 :invalid 선택자를 함께 사용하면, 유효한 값에는 초록색 테두리를, 잘못된 값에는 빨간색 테두리를 적용하는 등 폼 유효성 검사 UI를 더욱 직관적으로 구성할 수 있습니다.