html - CSS issue, :checked state doesn't work -

html - CSS issue, :checked state doesn't work -

i trying style radio buttons using approach. here can find demo of i`m trying 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,

input[type="radio"]:checked

doesn't work me. nil happens when click button. although pseudo-classes :hover , :active work fine.

i have 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 take 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 generated adf , can't add together or alter something. far understand, problem input element beingness in span element , label beingness outside of span element. can help me out that?

!important. can't alter html file. need figure out, how work using css. without javascript or jquery.

update:

answer zack: using type="radio" , type="checkbox" together. give thanks noticing misprinting. still doesn`t solve issue me.

answer diodeus: what? can find bunch of tutorials explaining how it. here step-by-step video tutorial: https://www.youtube.com/watch?v=fql_bcf4jok

and cross-browser compatible.

answer bigal: give thanks much detailed answer. works fine me , understand doing wrong. god bless you! :)

the problem first have image of button on span , radio button while radio button (the thing want user click on) hidden.

remove background image on span tag maintain background image on radio button , reveal radio button again.

then disable wekbit/moz appearance (so default radio button goes away) , increment width , height of button 21px (because 19px little).

the final css 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 , 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 link i've spoken about: http://jsfiddle.net/sbef2so3/16/

html css stylesheet oracle-adf