CSS :enabled 선택자란?
CSS의 :enabled 선택자는 현재 활성화(사용 가능) 상태인 모든 <input> 요소를 대상으로 스타일을 적용하는 의사 클래스(pseudo-class)입니다. 반대로 disabled 속성이 지정되어 비활성화된 요소에는 이 선택자가 적용되지 않습니다.
예를 들어, 사용자가 값을 입력할 수 있는 텍스트 필드나 숫자 입력창에는 배경색을 다르게 지정하고, 비활성화된 입력창은 기본 상태로 두어 시각적으로 구분할 수 있습니다.
기본 문법
input:enabled {
/* 활성화된 input 요소에 적용할 스타일 */
}실전 예제
아래 코드는 :enabled 선택자를 사용하여 활성화된 <input> 요소의 배경을 파란색으로 지정하는 예제입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
input:enabled {
background: blue;
}
</style>
</head>
<body>
<form action = "">
Subject <input type = "text" name = "subject"><br>
Student: <input type = "text" name = "student"><br>
Age: <input type = "number" name = "age" disabled><br>
</form>
</body>
</html>코드 설명
위 예제에서는 세 개의 입력 필드가 있습니다.
- Subject, Student 필드는 별도의 속성이 없으므로 활성화 상태이며, 파란색 배경이 적용됩니다.
- Age 필드에는
disabled속성이 설정되어 있어 비활성화 상태이므로,:enabled선택자의 스타일이 적용되지 않습니다.
참고: 비활성화 요소 스타일링하기
비활성화된 요소에 별도의 스타일을 적용하려면 :disabled 선택자를 함께 사용하면 됩니다.
input:disabled {
background: #ddd;
color: #999;
}이처럼 :enabled와 :disabled 선택자를 조합하면 폼 요소의 상태에 따라 명확한 시각적 피드백을 제공하여 사용자 경험(UX)을 크게 향상시킬 수 있습니다.