チェックされたラジオボタンの隣にある画像のスタイルを変更する

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

Answer 2

あなたセレクタ.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>