CSS+HTML Radio button - every button have other img how?

StackOverflow https://stackoverflow.com/questions/23342936

  •  11-07-2023
  •  | 
  •  

Question

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 img for all radio-button is:

<head>
<style>
input[type=radio]:before {
    display: block;
    width: 50px;
    height: 50px;
    content: '';
    position: absolute;
    background-image: url(img.png);
    background-size: 50px 50px;
    pointer-events: none;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

input[type=radio]:checked:before {
    background-image: url(img.png);
        border:2px solid #3e6cd4;
          box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

.radiostyle {
    display:inline-block;
    width: 50px;
    height: 50px;
    background-color: blue;

}

</style>
</head>
<body>
<input type="radio" name="radio1" class="radiostyle" value="1">
<input type="radio" name="radio1" class="radiostyle" value="2">
<input type="radio" name="radio1" class="radiostyle" value="3">
</body>

Thanks for help!

Was it helpful?

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:

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

OTHER TIPS

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

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

<input type="radio" name="radio1" class="radiostyle first_image " value="1">
<input type="radio" name="radio1" class="radiostyle second_image " value="2">
<input type="radio" name="radio1" class="radiostyle third_image" value="3">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top