Raimonds Soko─╝vjaks Raimonds Soko─╝vjaks - 7 months ago 13
HTML Question

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.

Answer

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/

Comments