웹 폼을 만들다 보면 사용자가 조작할 수 없는 비활성화(disabled) 상태의 입력 필드가 필요한 경우가 많습니다. 이럴 때 CSS의 :disabled 선택자를 사용하면 비활성화된 모든 <input> 요소에 별도의 스타일을 손쉽게 적용할 수 있습니다.
:disabled 선택자란?
:disabled는 가상 클래스(pseudo-class) 선택자로, HTML 요소에 disabled 속성이 설정되어 있을 때 해당 요소를 대상으로 스타일을 지정합니다. 반대로 활성화된 요소를 선택하려면 :enabled 선택자를 함께 사용하면 됩니다.
예를 들어, 활성화된 입력 필드에는 파란색 배경을, 비활성화된 입력 필드에는 빨간색 배경을 지정하려면 아래와 같이 작성합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
input:enabled {
background: blue;
}
input:disabled {
background: red;
}
</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 입력 필드는 활성화 상태이므로
input:enabled규칙에 따라 파란색 배경이 적용됩니다. - Age 입력 필드는
disabled속성이 설정되어 있으므로input:disabled규칙에 따라 빨간색 배경이 적용되며, 사용자가 값을 수정할 수 없습니다.
활용 팁
:disabled 선택자는 텍스트 입력창뿐만 아니라 버튼(<button>), 체크박스(<checkbox>), 라디오 버튼(<radio>) 등 모든 폼 컨트롤에 적용할 수 있습니다. 비활성화된 요소에 시각적으로 구분되는 스타일(예: 회색 배경, 흐린 글자색)을 지정하면 사용자에게 더 명확한 UI 경험을 제공할 수 있습니다.