[css3] :enabled :disabled 가상 클래스

 

 

[css3] :enabled :disabled 가상 클래스

오늘 배울 부분은 가상 클래스인 :enabled 와 :disabled 선택자 입니다.

우선 두 단어의 뜻을 볼게요

*enabled : 가능한, 이용할 수 있는
*disabled : 이용 불가능한, 비활성화 된

 

 

:enabled 와 :disabled는 주로 html form 요소에 적용 하는데,

 

form 태그(html 양식 만들기)

form 요소는 기본값으로 enabled 상태입니다. (선택, 클릭, 입력, 포커스 가능)

enabled 상태에 있는 요소로는 <input>, <textarea>, <button>, <select>, <option> 등이 있습니다.

이 요소에 disabled 속성을 사용하면 disabled(비활성화) 상태가 됩니다.

비활성화 상태는 선택, 클릭, 입력, 포커스가 되지 않는 상태입니다.

 

▶  브라우저 지원:  ie 9.0+, chrome 4.0+, ff 3.5+, safari 3.2+, opera 9.6

▶  :enabled 가상 클래스 문법

:enabled { 속성;속성값; }

예>   input:enabled {color:red;}

▶  :disabled 가상 클래스 문법

:disabled { 속성;속성값; }

예>   option:disabled {background-color:grey;}

 

▶  html/css 작성 예입니다~

enabled disabled.htm

 

html

 
 <form action="url" method="get" id="music">
 이름: <input type="text" value="id"> <br>
비밀번호: <input type="text" value="pssword"> <br>
홈페이지: <input type="text" value="homepage" disabled>
</form>

<h3> 연령대는? </h3>
<select>
  <option value="10" disabled>10대</option>
  <option value="20">20대</option>
  <option value="30">30대</option>
  <option value="40">40대</option>
  <option value="50" disabled>50대</option>
</select>

css

input:enabled{background-color: #FAF4C0;}
option:disabled{background-color:#EAEAEA;}

 

▶ 실행화면

 

:enabeld 상태일 때는 노란색 바탕이며

:disabled 상태일 때는 회색으로 표시됩니다

 

   

select 태그

 

option 태그

 

input 태그

 

textarea 태그