CSS의 :optional 선택자를 사용하면 required 속성이 없는 <input> 요소에 별도의 스타일을 적용할 수 있습니다. 반대로 필수 입력 필드에 스타일을 지정하고 싶다면 :required 선택자를 활용하면 됩니다.
예제
다음 코드를 실행하면 :optional 선택자의 동작을 직접 확인할 수 있습니다:
<!DOCTYPE html>
<html>
<head>
<style>
input:optional {
background-color: blue;
}
</style>
</head>
<body>
<form>
Subject: <input type = "text" name = "subject"><br>
Student: <input type = "text" name = "student" required><br>
</form>
</body>
</html>코드 설명
위 예제에서 "Subject" 입력 필드는 required 속성이 없기 때문에 :optional 선택자에 정의된 스타일(파란색 배경)이 적용됩니다. 반면 "Student" 입력 필드는 required 속성이 있으므로 해당 스타일의 대상에서 제외됩니다.
이처럼 :optional 선택자를 사용하면 선택 입력 필드와 필수 입력 필드를 시각적으로 구분하여, 사용자가 어떤 항목을 반드시 입력해야 하는지 한눈에 파악하도록 도울 수 있습니다. :optional 선택자는 Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저에서 지원됩니다.