비활성화(disabled)된 모든 <input> 요소에 스타일을 지정하려면 CSS의 :disabled 선택자를 사용하면 됩니다. 이 선택자는 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' 입력 필드는 파란색 배경으로 표시되고, disabled 속성이 적용된 'Age' 필드는 빨간색 배경으로 나타납니다.
비활성화된 입력 필드는 사용자가 값을 수정할 수 없으며, 대부분의 브라우저에서는 기본적으로 흐린 색으로 표시됩니다. 따라서 :disabled 선택자로 명시적인 스타일을 지정해 주면 어떤 필드가 편집 불가능한 상태인지 사용자에게 더 분명하게 전달할 수 있습니다.