CSS의 :optional 선택자는 required 속성이 없는 폼 입력 요소(<input>)에 스타일을 적용할 때 사용합니다. 반대로 필수 입력 항목을 강조하고 싶다면 :required 선택자를 함께 활용하면 됩니다.
:optional 선택자란?
:optional은 HTML5 폼 유효성 검사와 관련된 의사 클래스(Pseudo-class)입니다. required 속성이 지정되지 않아 '선택 입력'으로 취급되는 요소만 골라서 스타일을 적용할 수 있습니다. 이를 활용하면 사용자에게 어떤 항목이 필수이고 어떤 항목이 선택인지 시각적으로 명확하게 전달할 수 있어 폼의 가독성과 사용성이 크게 향상됩니다.
예제
아래 코드를 실행하면 :optional 선택자가 실제로 어떻게 동작하는지 확인할 수 있습니다. 'Subject' 입력란은 required 속성이 없어 파란색 배경이 적용되고, 'Student' 입력란은 required 속성이 있어 해당 스타일이 적용되지 않습니다.
<!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>참고 사항
:optional 선택자는 Chrome, Firefox, Safari, Edge 등 주요 최신 브라우저에서 모두 지원됩니다. 또한 <input>뿐만 아니라 <select>, <textarea> 같은 다른 폼 요소에도 동일하게 적용할 수 있습니다. 필수 항목과 선택 항목의 배경색이나 테두리 색을 구분해 표시하면 사용자가 폼을 더 빠르고 정확하게 작성할 수 있습니다.