[selector] CSS - :checked 가상선택자 - 체크된요소선택

:checked 선택자 예제 - "checkbox 또는 radio" 속성의 INPUT 태그

 

<style> 

input:checked { height: 50px; width: 50px;}

</style>

<form action="">

  <input type="radio" value="HTML" name="code" checked="checked"> HTML<br>

  <input type="radio" value="CSS" name="code"> CSS<br>

  <input type="checkbox" value="PHP" checked="checked"> PHP<br>

  <input type="checkbox" value="SQL"> SQL

</form>

결과보기

참고 : Firefox는 checkbox 배경색 지원 안함.

:checked 선택자 정의 

 

선택된 checkbox 또는 radio 타입의 INPUT 버튼이나 선택된 option 태그를 선택하는 선택자. 

 

---

 

1.

CSS3

 

2.

IE9 이상 최신브라우저 지원.

 

:checked 선택자 구문 

 

:checked { CSS 선언내용 ;}

 

:checked 선택자 예제 - option 태그

 

<style> 

option:checked {background:yellow;}

</style>

<select>

  <option value="">언어 선택</option>

  <option value="HTML">HTML</option>

  <option value="CSS">CSS</option>

  <option value="PHP">PHP</option>

  <option value="SQL">SQL</option>

</select>

결과보기