CSS 문제 : checked 상태가 작동하지 않습니다.

Question

이 방법을 사용하여 라디오 버튼의 스타일을 지정하려고합니다.

http://jsfiddle.net/sbef2so3/2/

CSS :

/*works*/ 
input[type="radio"] { 
    display:none; /*doesn`t work here*/ 
    visibility:hidden; 
} 

/*doesn't work*/ 
input[type="radio"] + label span { 
    display:inline-block; 
    width:19px; 
    height:19px; 
    margin:-1px 4px 0 0; 
    vertical-align:middle; 
    background:url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png) 0px top no-repeat; 
    cursor:pointer; 
} 

/*doesn't work*/ 
input[type="radio"]:checked { 
    background:url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png) 0px bottom no-repeat; 
} 

문제는, 그

input[type="radio"]:checked 

는하지 않습니다 여기 난`이 달성하려고 무엇의 데모를 찾을 수 있습니다 나를 위해 일해. 버튼을 클릭해도 아무런 변화가 없습니다. 의사 클래스 :hover 및 :active이 정상적으로 작동하지만

나는이 HTML 코드가이 HTML은 ADF에 의해 생성되는

<td class="AFContentCell" valign="top" nowrap=""> 
    <div id="pt1:r1:0:sor2::content" class="af_selectOneRadio_content" name="pt1:r1:0:sor2"> 
    <fieldset style="border:none; margin:0px; padding:0px;"> 
     <legend class="p_OraHiddenLabel">Please choose something:</legend> 
     <div> 
     <span class="af_selectOneRadio_content-input"> 
      <input id="rad1" class="af_selectOneRadio_native-input" type="radio" value="0" name="pt1:r1:0:sor2"> 
     </span> 
     <label class="af_selectOneRadio_item-text" for="rad1">Yes</label> 
     </div> 
     <div> 
     <span class="af_selectOneRadio_content-input"> 
      <input id="rad2" class="af_selectOneRadio_native-input" type="radio" value="1" name="pt1:r1:0:sor2"> 
     </span> 
     <label class="af_selectOneRadio_item-text" for="rad2">No</label> 
     </div> 
    </fieldset> 
    </div> 
</td> 

및 추가하거나 뭔가를 변경할 수 없습니다. 내가 이해하는 한, 문제는 요소가 span 요소이고 label 요소가 span 요소 외부에있는 문제입니다. 누군가 나를 도와 줄 수 있습니까?

중요 : HTML 파일을 변경할 수 없습니다. CSS를 사용하여이 작업을 수행하는 방법을 알아야합니다. JavaScript 또는 jQuery없이.

UPDATE : 잭에

답변 : 내가 함께 유형 = "라디오"과 유형 = "체크 박스"를 사용하고 있습니다. 제 misprinting에 감사드립니다. 그래도 나에게이 문제가 해결되지는 않습니다.

Diodeus에 대한 답변 : 무엇? 수행 방법을 설명하는 자습서를 찾을 수 있습니다. 다음은 단계별 비디오 자습서입니다. https://www.youtube.com/watch?v=FQl_bcF4jOk

그리고 이것은 크로스 브라우저 호환입니다.

대 답 : 답장을 보내 주셔서 감사합니다. 이제 모든 것이 나를 위해 잘 작동하고 내가 뭘 잘못하고 있는지 이해합니다.

Answer 1

먼저 문제는 라디오 버튼 (사용자가 클릭하기를 원하는 것)이 숨겨져있는 동안 스팬과 라디오 버튼에 버튼 이미지가 있다는 것입니다.

span 태그에서 배경 이미지를 제거하고 라디오 버튼에 배경 이미지를 유지하고 라디오 버튼을 다시 표시하십시오.

그런 다음 wekbit/moz 모양을 해제하고 (기본 라디오 버튼이 사라지게) 버튼의 너비와 높이를 21px로 높이십시오 (19px가 너무 적기 때문).

마지막 CSS 내가 가진 : 여기

 input[type="radio"] { 
     display:inline-block; 
     width:21px; 
     height:21px; 
     margin:-1px 4px 0 0; 
     vertical-align:middle;                      background:url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png) 0px top no-repeat; 
     cursor:pointer; 
     appearance:none; 
     -moz-appearance:none; /* Firefox */ 
     -webkit-appearance:none; /* Safari and Chrome */ 
     } 

     input[type="radio"]:checked { 
background:url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png) 0px bottom no-repeat; 
     } 

     .af_selectOneRadio_item-text { 
     color: Green; 
     } 

내가 대해 이야기 한 내용에 대한 링크입니다 : 그것은 작동하지 않습니다 물론 http://jsfiddle.net/sbef2so3/16/