웹 폼을 만들다 보면 사용자가 잘못된 값을 입력했을 때 시각적으로 피드백을 주어야 하는 경우가 많습니다. 이럴 때 CSS의 :invalid 선택자를 사용하면 유효성 검사를 통과하지 못한 모든 <input> 요소에 별도의 JavaScript 코드 없이 간편하게 스타일을 적용할 수 있습니다.
:invalid 선택자란?
:invalid 선택자는 HTML5 기본 유효성 검사 규칙(예: type="email", required, pattern 등)에 어긋나는 값이 입력된 폼 요소를 자동으로 감지합니다. 예를 들어, 이메일 형식에 맞지 않는 텍스트가 입력된 <input type="email"> 요소는 자동으로 :invalid 상태가 됩니다.
기본 예제
아래 코드는 잘못된 값이 입력된 <input> 요소에 빨간색 배경을 적용하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
input:invalid {
background: red;
}
</style>
</head>
<body>
<h2>입력값 유효성 검사</h2>
<input type = "email" value = "InvalidEmail">
<p>유효하지 않은 이메일 주소를 입력하면 빨간색 배경이 나타납니다.</p>
</body>
</html>
위 코드에서 value = "InvalidEmail"처럼 이메일 형식에 맞지 않는 값이 들어 있으면 해당 입력 필드의 배경이 즉시 빨간색으로 변경됩니다. 사용자가 올바른 이메일 주소를 입력하는 순간 스타일은 사라집니다.
실무 활용 팁
- 반대 상황에는 :valid 선택자 사용: 올바른 값이 입력된 요소에 초록색 배경 등 긍정적인 피드백을 주고 싶다면
:valid선택자를 활용하세요. - 페이지 로드 시 초기 상태 주의:
required속성이 있는 빈 입력 필드도:invalid로 판단되므로, 페이지가 열리자마자 스타일이 적용되지 않게 하려면:placeholder-shown같은 선택자와 조합하는 방법을 고려해 보세요. 예:input:not(:placeholder-shown):invalid - 브라우저 호환성:
:invalid선택자는 Chrome, Firefox, Safari, Edge 등 대부분의 최신 브라우저에서 지원되므로 안심하고 사용할 수 있습니다.
이처럼 :invalid 선택자만으로도 JavaScript 없이 실시간 입력 검증 피드백을 제공할 수 있어, 사용자 경험을 개선하는 데 매우 유용한 CSS 기능입니다.