html - Style Radio Buttons with CSS3 ::before and ::after -

i working on front end of web project. fit design of website, want radio buttons these:

so headed on this nice article , started reading, may implement myself. have gone ahead , created 3 icons above in illustrator , saved them web project.

html code:

<section>     <div class="radio">         <input type="radio" class="radio-btn" name="person" id="radio-btn-james" value="james" checked>         <label for="radio-btn-james">james</label>     </div><!-- .radio -->      <div class="radio">         <input type="radio" class="radio-btn" name="person" id="radio-btn-michael" value="michael">         <label for="radio-btn-michael">michael</label>     </div><!-- .radio -->      <div class="radio">         <input type="radio" class="radio-btn" name="person" id="radio-btn-andy" value="andy">         <label for="radio-btn-andy">andy</label>     </div><!-- .radio --> </section> 

css code:

section {     padding: 50px; }  /* radio button styling */  .radio-btn {     margin: 0px;     padding: 0px;     box-sizing: border-box; }  .radio-btn {     position: absolute;     clip: rect(0, 0, 0, 0);     clip: rect(0 0 0 0); }  .radio-btn, .radio-btn + label::before {     content: url('radio_unchecked.png'); }  .radio-btn:checked + label::before {     content: url('radio_checked.png'); }  .radio-btn:hover, .radio-btn:hover + label::before {     content: url('radio_hover.png'); }  .radio label {     padding-left: 20px; } 

but i'm getting weird behavior! have created jsfiddle of have.

problems:

1. radio buttons won't tick (icon doesn't change).
2. as hover, icon changes wrong radio button, not 1 hovered over!

any in fixing these issue appreciated.

thank you.

this solve it: http://jsfiddle.net/hf8ux/

html code:

<section>         <div class="radio">             <input type="radio" name="person" id="radio-1" value="james">             <label for="radio-1">james</label>         </div>          <div class="radio">             <input type="radio" name="person" id="radio-2" value="michael">             <label for="radio-2">michael</label>         </div>          <div class="radio">             <input type="radio" name="person" id="radio-3" value="andy">             <label for="radio-3">andy</label>         </div>     </section> 

css code:

.radio input[type=radio] {    visibility: hidden; }    .radio input + label::before {     content: url('http://i61.tinypic.com/k9umie.png');     margin-right:5px; }  .radio input:checked + label::before {     content: url('http://i62.tinypic.com/5mjspc.png'); } .radio input:hover + label::before {     content: url('http://i62.tinypic.com/kasc5k.png'); }