Css+html Radio Button - Every Button Have Other Img How?

Hello I want to have for every radio-button other image not for all button's same image. How would I do that? I tried it on many ways but none has worked yet.. My code with only 1

Solution 1:

You can use additional CSS selectory, otherwise add seperate classes or id's:

input[type="radio"][value="1"]:before {
    background-image: url(img1.png);
}

input[type="radio"][value="1"]:checked:before {
    background-image: url(img1.png);
}

input[type="radio"][value="2"]:before {
    background-image: url(img2.png);
}

input[type="radio"][value="2"]:checked:before {
    background-image: url(img2.png);
}

input[type="radio"][value="3"]:before {
    background-image: url(img3.png);
}

input[type="radio"][value="3"]:checked:before {
    background-image: url(img3.png);
}

Solution 2:

I think you should add a class name for every option item, after your initial declarations, for example:

input[type=radio].button1:before {
    background-image: url(img2.png);
 }

input[type=radio].button1:checked:before {
    background-image: url(img3.png);
 }

 [...]

And in your code you should use:

<inputtype="radio" name="radio1"class="radiostyle button1" value="1">
<inputtype="radio" name="radio1"class="radiostyle button2" value="2">
<inputtype="radio" name="radio1"class="radiostyle button3" value="3">

Solution 3:

Just add another class having different property for image. JsFiddle Link Demo

For example :

.first_image:checked:before { border:2px solid blue; } 
.second_image:checked:before { border:2px solid green; } 
.third_image:checked:before { border:2px solid red; } 

<inputtype="radio" name="radio1"class="radiostyle first_image " value="1">
<inputtype="radio" name="radio1"class="radiostyle second_image " value="2">
<inputtype="radio" name="radio1"class="radiostyle third_image" value="3">