更改已选中单选按钮旁边的图像样式

Question

当我检查相关按钮时,我正在尝试更改组中每个单选按钮旁边的图像的背景颜色.我使用了以下HTML和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>

然而CSS不起作用,图像保持不变.这可能是我的CSS不正确,还是不可能这样做？

Answer 1

这个..

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

假定图像是后代的input,它不是.

使用相邻的兄弟选择器+

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