CSS :required 선택자란?
CSS의 :required 선택자는 HTML 폼에서 required(필수) 속성이 설정된 <input> 요소에만 특정 스타일을 적용하는 의사 클래스(pseudo-class)입니다. 이 선택자를 활용하면 사용자가 반드시 입력해야 하는 필드를 시각적으로 강조하여, 어떤 항목이 필수인지 한눈에 알 수 있도록 도울 수 있습니다.
예를 들어 필수 입력란의 배경색을 변경하면 사용자 경험이 크게 향상되며, 별도의 JavaScript 없이 순수 CSS만으로 구현할 수 있다는 장점이 있습니다.
사용 예제
아래 코드는 :required 선택자를 사용하여 required 속성이 있는 입력 필드의 배경색을 주황색으로 변경하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
input:required {
background-color: orange;
}
</style>
</head>
<body>
<form>
Subject: <input type = "text" name = "subject" value = "C++"><br>
Student: <input type = "text" name = "student" value = "Amit" required><br>
</form>
</body>
</html>코드 설명
위 예제에는 두 개의 텍스트 입력 필드가 있습니다. 첫 번째 'Subject' 필드에는 required 속성이 없으므로 기본 배경색이 유지되고, 두 번째 'Student' 필드에는 required 속성이 지정되어 있어 CSS 규칙에 따라 주황색 배경이 적용됩니다.
:optional 선택자와 함께 사용하기
:required와 반대 개념인 :optional 선택자도 함께 알아두면 유용합니다. :optional은 required 속성이 없는 입력 요소를 대상으로 하므로, 필수 항목과 선택 항목을 서로 다른 색상으로 구분하는 UI를 쉽게 만들 수 있습니다.
input:required {
border: 2px solid orange;
}
input:optional {
border: 2px solid gray;
}브라우저 호환성
:required 선택자는 Chrome, Firefox, Safari, Edge, Opera 등 주요 최신 브라우저에서 모두 지원됩니다. 다만 Internet Explorer 9 이하 버전에서는 동작하지 않으므로, 구형 브라우저 지원이 필요한 프로젝트라면 이 점을 고려해야 합니다.