Radio button with custom image

Question

I've used this example for checkboxes but then later I realized I need one for the radio buttons.

Can someone please customize this example for radio buttons?

Change checkbox check image to custom image

html

<input type="radio" class="input_class_checkbox" name="role"> Coach
<input type="radio" class="input_class_checkbox" name="role"> Athlete

jquery

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

Fiddle:

http://jsfiddle.net/cn6kn/

or is there a one stop solution to use custom images both for radio button and checkboxes. I searched a few but all of them are offering their own skins.

From the example I customized to included background-images as follows but it's not working for the radio buttons, all radio buttons remain checked irrespective I click the other one.

.class_checkbox {
    width: 36px;
    height: 36px;
    background: url("../images/checkbox.png");
}
.class_checkbox.checked {
    background: url("../images/checkbox-checked.png");
}

Answer 1

Use Pseudo-elements in this case i am using ::before (:before)

Update: since firefox doesn't support pseudo-elements on inputs yet, use the adjacent sibling selectors

:root{padding: 40px}

[name=radio]{
    display: none
}

[for^=radio]{
    position: relative;
    margin: 64px
}

[for^=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=radio]:checked + [for^=radio]:before{
    background: green
}

<input id=radio-1 type=radio name=radio />
<label for=radio-1></label>
<input id=radio-2 type=radio name=radio />
<label for=radio-2></label>
<input id=radio-3 type=radio name=radio />
<label for=radio-3></label>

Or the General sibling selectors

:root{padding: 40px}

[name=radio]{
    display: none
}

[for^=radio]{
    position: relative;
    margin: 64px
}

[for^=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[id=radio-1]:checked ~ [for=radio-1]:before,
[id=radio-2]:checked ~ [for=radio-2]:before,
[id=radio-3]:checked ~ [for=radio-3]:before{
    background: green
}

<input id=radio-1 type=radio name=radio />
<input id=radio-2 type=radio name=radio />
<input id=radio-3 type=radio name=radio />

<label for=radio-1></label>
<label for=radio-2></label>
<label for=radio-3></label>

The basic

[type=radio]{
    position: relative;
    margin: 40px
}

[type=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=radio]:checked:before{
    background: green
}

<input type=radio />

multiple inputs

[type=radio]{
    position: relative;
    margin: 40px
}

[type=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=radio]:checked:before{
    background: green
}

<input type=radio name=radio />
<input type=radio name=radio />
<input type=radio name=radio />

Answer 2

oh sorry, i misunderstood the first time, how about something like this? http://jsfiddle.net/swm53ran/126/

pretty much whats happening is that the old radio button css is getting hid, and then your css will take over, but still maintains the functionality of a radio button.

label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px;  
    font-size: 13px;  
}  

input[type=radio] {  
    display: none;  
} 

label:before {  
    content: "";  
    display: inline-block;  

    width: 16px;  
    height: 16px;  

    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottombottom: 1px;  
    background-color: #aaa;  
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}  
.radio label:before {  
    border-radius: 8px;  
}  

input[type=radio]:checked + label:before {  
    content: "\2022";  
    color: red;  
    font-size: 30px;  
    text-align: center;  
    line-height: 18px;  
}