[Solved] CSS only Radio button [closed]

by


I’ve updated my fiddle with a smaller version for the images and the text.
Here you go: http://jsfiddle.net/Y9vL7/2/
Hope this is what you wanted.
If you want to change the size of the images for the checkboxes you need to do some math for the background-position in the sprite.

p>input[type="radio"] {
    opacity:0;
    position:absolute;
    filter:alpha(opacity=0);
    margin:5px 0 0 5px;
}
p>input[type="radio"]:focus+label {
    color:#C30
}
p>input[type="radio"]+label {
    background:url('http://i.stack.imgur.com/kPXdm.png') left top no-repeat;
    background-size:22px;
    position:relative;
    margin:0;
    padding:0 0 0 30px;
    cursor:pointer;
    line-height:25px;
    min-height:25px;
    display:inline-block;
    z-index:0;
    font-size:16px;
    font-weight:bold
}
p>input[type="radio"]+label {
    background-position:0 -103px
}
p>input[type="radio"]:checked+label {
    background-position:0 -155px
}
p>input[type="radio"]:disabled+label {
    background-position:0 -207px;
    color:#999
}
p>input[type="radio"]:disabled:checked+label {
    background-position:0 -259px;
    color:#999
}

2

solved CSS only Radio button [closed]