본문 바로가기
css

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

by 지구별에 2014. 11. 5.

 

 

[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 태그

 

반응형

'css' 카테고리의 다른 글

[css2] :lang 가상 클래스  (0) 2014.11.07
[css3] :checked 가상 클래스  (0) 2014.11.06
[css3] :target 가상 클래스  (0) 2014.11.04
[css] :focus 가상 클래스  (1) 2014.10.31
[css3] box-shadow 속성(그림자 효과)  (2) 2014.10.08

댓글