웹 폼을 다룰 때 활성화(사용 가능) 상태의 입력 요소만 골라서 스타일을 적용해야 하는 경우가 자주 있습니다. 이럴 때 CSS의 :enabled 의사 클래스(pseudo-class)를 사용하면 됩니다.
:enabled 선택자란?
:enabled 선택자는 disabled 속성이 설정되지 않아 사용자가 상호작용할 수 있는 모든 폼 요소를 대상으로 합니다. 반대로 비활성화된 요소에는 :disabled 선택자를 사용할 수 있습니다.
활성화된 모든 <input> 요소에 스타일을 적용하려면 아래와 같이 작성합니다.
input:enabled {
background: blue;
}예제 코드
다음 예제에서는 활성화된 <input> 요소에 파란색 배경을 적용합니다. 'Age' 필드는 disabled 속성이 있어 배경색이 적용되지 않습니다.
<!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 선택자는 <input>뿐만 아니라 <textarea>, <select>, <button> 등 대부분의 폼 요소에도 사용할 수 있습니다. 비활성화된 요소와 활성화된 요소를 시각적으로 구분하면 사용자 경험(UX) 측면에서도 큰 도움이 됩니다.