CODEWITHSUNDEEP
htmlcss
Michael Emerson
Michael Emerson

Reputation: 1813

Changing style of an image next to a checked radio button

I'm trying to change the background colour of an image which is next to each radio button in a group, when the relevant button is checked. I used the following HTML and CSS:

.option-choice:checked img.img-thumbnail {
    background-color: #004990 !important;
    border-color: red;
}
<div class="radio">
    <label>
        <input class="option-choice" name="option[227]" value="18" type="radio">
         <img src="imageurl.jpg" alt="20mm " class="img-thumbnail">20mm
    </label>
</div>

Yet the CSS does not work, and the image remains unchanged. Is it possible my CSS is not correct here, or is it just not possible to do this?

Upvotes: 1

Views: 51

Answers (2)

Paulie_D
Paulie_D

Reputation: 115288

This..

.option-choice:checked img.img-thumbnail {
  background-color: #004990 !important;
  border-color: red;
}

assumes that the image is a descendant of the input which it is not.

Use the Adjacent Sibling Selector +

.option-choice:checked + img.img-thumbnail {
  background-color: #004990 !important;
  border-color: red;
}

Upvotes: 6

Huelfe
Huelfe

Reputation: 1836

Your selector has to be .option-choice:checked + img.img-thumbnail:

.option-choice:checked + img.img-thumbnail {
  background-color: #004990 !important;
  border-color: red;
}
<div class="radio">
  <label>
    <input class="option-choice" name="option[227]" value="18" type="radio">
     <img src="imageurl.jpg" alt="20mm " class="img-thumbnail">20mm
     </label>
</div>

Upvotes: 2

Related Questions