24'C 구름 많음
서울 강남구
:checked 속성은 폼 필드요소들인 checkbox 나 radio 의 선택 상태를 나타내는 속성입니다. 이는 마치 자바스크립트의 클릭 이벤트를 흉내내는 것과 같아서, CSS만을 이용해서 이벤트를 수신하는 효과를 구현할 수 있습니다. 가령 메뉴나 탭등과 같이 전과 후의 디자인을 변경하는 경우가 있습니다.
IE8과 그 이하에서 :checked
의사 클래스를 추가하는 폴리필로서, IE8과 IE7에서 테스트되었다.
jQuery 1.7 이상의 버전이 필요하며, IE 조건부 주석을 이용하여 이를 삽입한다.
JAVASCRIPT
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--[if lte IE 8]>
<script src="path/to/poly-checked.min.js"></script>
<![endif]-->
스크립트가 삽입되기 이전에 모든 스타일시트(CSS) 파일이 삽입되어야 한다.
:checked
의사클래스 처럼 요소의 checked 상태를 자동적으로 업데이트 한다.:checked
가 작동하도록 추가적인 패치가 이루어졌다. 맞춤화된 CSS 체크박스/라디오를 사용할때 유용할 것이다.<link rel="stylesheet">
요소에서 인식할 수 없는 선택자나 원시 CSS 텍스트를 검색할 CSSOM/DOM API가 없다. 따라서 폴리필은 동일출처(same-origin) 정책의 XHR을 사용한다. 해결방법은 동일한 도메인에 폴리필을 필요로하는 모든 스타일시트를 호스팅하는 것이다. .clone(true)
을 사용할 수 있다. 모든 폴링을 제거하는 것이 최선의 방법이지만, 새로 생성된 입력요소를 감지할 수 있는 이벤트 방법을 발견하지 못했다(IE<=8).polyCheckedParseNewStylesheets
기능을 구현하는 것은 가능하다.option
요소(option: checked)에 :checked
의사 클래스를 폴리필하지 않는다. 옵션 요소는 크로스브라우징 스타일링에 제한되기에 중요 우선 순위가 아니다. 이것을 스타일링 하는 많은 플러그인이 대체 방안이 될 수 있다.