[css3] :checked 가상 클래스

 

 

[css3] :checked 가상 클래스

 

:checked 가상 클래스는 요소가 checked (선택) 상태일 때 적용하는 선택자입니다

<input type="radio" 또는 "checkbox"> 그리고 <option> 요소에 적용할 수 있습니다.

 

[html] option 태그

 

[html] input type 속성

 

 

 

▶문법

 

:checked {속성:속성값;}

 

예>  option:checked {color: red;}

 

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

 

 

▶html/css 작성 예를 보겠습니다~

checked.htm

 

 

html

<h3> option 요소</h3>
<select>
  <option value="20">20대</option>
  <option value="30">30대</option>
  <option value="40">40대</option>
</select>

 <form action="url" method="post">
<h3> Type = "checkbox" </h3>
 
<input type="checkbox" name="food" value="fruit">과일<br>
<input type="checkbox" name="food" value="sea">해조류</br>
<input type="checkbox" name="food" value="meat">육류
 
<h3> Type = "radio" </h3>
<input type="radio" name="media" value="ie">Internet Explorer<br>
<input type="radio" name="media" value="gc">Google Chrome<br>
<input type="radio" name="media" value="ff">FireFox
</form>

 

 

css

option:checked{background-color:yellow;}
input[type="checkbox"]:checked{width: 20px; height: 20px;}
input[type="radio"]:checked{margin-left: 25px;}

 

▶실행화면

 

 초기 화면

                                                                   checked 상태일 때

 

option 요소는 항목이 선택될 때 배경이 노란색으로 표시되며

 

체크박스가 선택될 때는 너비, 높이 20px로 변합니다

 

라디오버튼이 선택될 때는 왼쪽 여백이 25px 생깁니다.

 

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

 

[css3] :target 가상 클래스

 

[css] :focus 가상 클래스

 

[html] select 태그