CSS의 :invalid 선택자를 사용하면 유효하지 않은(잘못된) 값을 가진 모든 <input> 요소에 원하는 스타일을 적용할 수 있습니다. 이 선택자는 HTML5 폼 유효성 검사와 함께 작동하며, 사용자가 잘못된 형식의 데이터를 입력했을 때 즉시 시각적인 피드백을 제공하는 데 유용합니다.
예를 들어, 이메일 입력 필드에 올바르지 않은 이메일 주소가 입력되면 배경색을 빨간색으로 변경하여 사용자에게 오류를 알려줄 수 있습니다.
예제 코드
다음 코드를 실행하여 :invalid 선택자의 동작을 직접 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
input:invalid {
background: red;
}
</style>
</head>
<body>
<h2>Heading</h2>
<input type = "email" value = "InvalidEmail">
<p>The style (red color background) appears if you type an irrelevant/ invalid email address.</p>
</body>
</html>실행 결과 설명
위 예제에서는 input:invalid 규칙을 통해 유효성 검사를 통과하지 못한 입력 필드에 빨간색 배경이 적용됩니다. 기본값으로 설정된 "InvalidEmail"은 이메일 형식에 맞지 않으므로 페이지가 로드되는 즉시 해당 입력 필드가 빨간색으로 표시됩니다.
사용자가 올바른 이메일 주소(예: user@example.com)를 입력하면 값이 유효해지므로 빨간색 배경이 사라지고 일반 상태로 돌아갑니다. 이처럼 :invalid 선택자를 활용하면 JavaScript 없이도 순수 CSS만으로 실시간 폼 유효성 피드백 UI를 손쉽게 구현할 수 있습니다.