CSS의 :valid 선택자는 폼 컨트롤 요소가 유효성 검사를 통과한 상태일 때 스타일을 적용하는 의사 클래스(pseudo-class)입니다. 이를 활용하면 사용자가 올바른 형식의 값을 입력했는지 실시간으로 시각적으로 피드백할 수 있습니다.
:valid 선택자란?
:valid 선택자는 주로 <input>, <textarea>, <select> 같은 폼 요소에 사용되며, 입력된 값이 해당 요소의 유효성 조건(예: 이메일 형식, 필수 입력 여부 등)을 만족하면 지정한 스타일이 자동으로 적용됩니다.
반대로 유효하지 않은 값이 입력되었을 때 스타일을 적용하려면 :invalid 선택자를 함께 사용하는 것이 좋습니다.
예제 코드
아래 예제는 이메일 입력 필드에 유효한 이메일 주소를 입력하면 배경색이 빨간색으로 바뀌도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
input:valid {
background: red;
color: white;
}
</style>
</head>
<body>
<h2>유효성 검사 예제</h2>
<input type="email" value="amit@example.com">
<p>유효한 이메일 주소를 입력하면 빨간색 배경 스타일이 적용됩니다.</p>
</body>
</html>동작 방식 설명
type="email"속성이 지정된 입력 필드는 브라우저가 자동으로 이메일 형식을 검사합니다.- 입력값이 올바른 이메일 형식이면
:valid상태가 되어 배경이 빨간색으로, 글자는 흰색으로 표시됩니다. - 형식에 맞지 않는 값을 입력하면 스타일이 해제됩니다.
활용 팁
실무에서는 :valid와 :invalid를 함께 사용해 유효할 때는 초록색 테두리, 유효하지 않을 때는 빨간색 테두리를 표시하는 방식으로 UX를 개선할 수 있습니다. 또한 JavaScript 없이 순수 CSS만으로 실시간 폼 검증 피드백을 제공할 수 있어 성능 면에서도 유리합니다.