Question

I found a CSS structure which can make my radio buttons work with custom background images. But they all have the same background image. Is it possible to write a structure so that each individual radio button has it’s own background image but the functionality stays the same.

I am pasting a JsFiddle example: JSFiddle example

For example I want the last radio button “Melons” to have a different background image. How can I do this?

The CSS so far:

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    display:inline;
    font-size: 18px;
}
input[type="radio"] + label:before {
    content: '';
    display:inline-block;
    width: 32px;
    height: 32px;
    background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
    vertical-align: middle;
}
input[type="radio"]:checked + label:before {
    content: '';
    background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}

Answer 1

You can overwrite your css. put this css after your input[type="radio"]:checked + label:before css

#radio4 + label:before {
    content: '';
    background: url(your image path);
}

hope this will help.

Thank you,