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?

Answer 1

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;  
}