Q:

CSS issue, :checked state doesn't work

I am trying to style radio buttons using this approach. Here you can find a DEMO of what I`m trying to accomplish: 
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;
}

The problem is, that 
input[type="radio"]:checked

doesn't work for me. Nothing happens when I click the button. Although pseudo-classes :hover and :active work fine. 
I have this HTML code:
<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>

This HTML is generated by ADF and I can't add or change something. As far as I understand, the problem is with that input element being in span element and label being outside of the span element. Can someone help me out with that?
Important: I can't change HTML file. I need to figure out, how to get this to work using CSS. Without JavaScript or jQuery.
UPDATE:
Answer to Zack: I am using type="radio" and type="checkbox" together. Thank you for noticing my misprinting. Still this doesn't solve the issue for me. 
Answer to Diodeus: What? You can find a bunch of tutorials explaining how to do it. Here is step-by-step video tutorial: https://www.youtube.com/watch?v=FQl_bcF4jOk
And this is cross-browser compatible.
Answer to bigal: Thank you very much for your detailed answer. Now everything works fine for me and I understand what I was doing wrong.

A:

The problem first is that you have the image of the button on your span and radio button while the radio button (the thing you want the user to click on) is hidden.
Remove the background image on the span tag but keep the background image on the radio button and reveal your radio button again.
Then disable wekbit/moz appearance (so the default radio button goes away) and increase the width and height of the button to 21px (because 19px is too little).
The final CSS I have:
      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;
        }

Here is the link to what I've spoken about: http://jsfiddle.net/sbef2so3/16/

