CSS 가상 클래스 상태 선택자 (:enabled, :disabled 등)

웹 페이지에서 입력 양식폼을 만들 때 입력 양식의 상태에 따라 각각 스타일을 적용할 수 있습니다. 그럴 경우에 의사 클래스(가상 클래스) 선택자를 사용하시면 됩니다. 그럼 가상 클래스 중에서 요소의 상태에 따른 선택자에 대해서 알아보죠.

※ 사용자 동작에 반응하는 선택자는 이전 게시글을 참고하세요.

CSS 가상 클래스 반응 선택자 (:hover, :active 등)

CSS 가상 클래스 상태 선택자

1. 가상 클래스 중에서 자주 사용하는 “상태 선택자”

종류	설명
:enabled	사용 가능한 input 요소에 스타일 적용
:disabled	사용 불가능한 input 요소에 스타일 적용
:checked	선택된 input 요소에 스타일 적용
:not	지정한 input 요소가 아닌 스타일 적용

2. 사용 예제 (:enabled, :disabled, :focus)

<!DOCTYPE html>
<html>
<head>
<title>상태 선택자</title>
<style>
input { height: 30px; width: 300px;}

/* 사용 가능한 input 요소에 스타일 적용 */
input:enabled {
     background-color: white;
}
/* 사용 불가능한 input 요소에 스타일 적용 */
input:disabled, textarea:disabled {
     background-color: gray;
}
/* input 태그에 포커스된 경우 스타일 적용 */
input:focus {
     background-color: orange;
}
</style>
</head>
<body>
     <h2>Enabled input</h2>
     <input type="text">
     <h2>Disabled input</h2>
     <input type="text" disabled="disabled">
     <h2>Disabled textarea</h2>
     <textarea cols="50" rows="3" disabled></textarea>
</body>
</html>

3. 실행 결과 화면 (:enabled, :disabled, :focus)

사용 예제 (:enabled, :disabled, :focus) 실행 결과 화면입니다.

4. 사용 예제 (:checked)

<!DOCTYPE html>
<html>
<head>
<title>상태 선택자</title>
<style>
/* input 요소가 선택되면 선택된 input 요소의 
     첫 번째 lable 태그에 스타일 적용 */    
input:checked + label {
     color: red;
     font-weight: bold;
}    
</style>
</head>
<body>
     <fieldset>
          <legend>자주 사용하는 검색사이트 선택</legend>
          <input type="radio" name="site" id="google">
          <label for="google">구글 검색사이트</label>
          <input type="radio" name="site" id="naver">
          <label for="naver">네이버 검색사이트</label>
          <input type="radio" name="site" id="daum">
          <label for="daum">다음 검색사이트</label>
     </fieldset>    
</body>
</html>

5. 실행 결과 화면 (:checked)

※ CSS 결합(Combinators) 선택자 사용 : 이전 게시글 참고하세요.