html - 选中单选按钮时的 CSS 选择器

Question

我将图像用作单选按钮:

                <label class="radio-inline thumbs"><input type="radio" id="type_nee" name="type" value="nee" onkeyup="validate()" onclick="validate()"> <img src="assets/images/basis.png"  height="75"> </label>
                <label class="radio-inline thumbs"><input type="radio" id="type_ja" name="type" value="ja" onkeyup="validate()" onclick="validate()"> <img src="assets/images/bottom.png" height="75"> </label>

我隐藏了单选按钮:

   input[type=radio]:not(old){
      width   : 28px;
      margin  : 0;
      padding : 0;
      opacity : 0;
    }

图像透明:

.thumbs{opacity:0.5;}

我想在单击图像(= 单选按钮)时删除不透明度过滤器。使用哪个 CSS 选择器？我试过了

.thumbs:active{opacity:1;}

和

.thumbs:checked{opacity:1;}

没有结果。选中图像(= 单选按钮)时如何删除不透明度过滤器有什么建议吗？

Answer 1

我的示例，只需更改您的 HTML 和 CSS

input[type=radio]:not(old){
   width   : 28px;
   margin  : 0;
   padding : 0;
   opacity : 0;
}

.thumbs{opacity:0.5;}

.testchecked:checked + label > img {opacity:1;}

<input type="radio" id="type_nee" class="testchecked" name="type" value="nee">
<label for="type_nee" class="radio-inline">
  <img class="thumbs" src="assets/images/basis.png"  height="75">
</label>

<input type="radio" id="type_ja" class="testchecked" name="type" value="ja">
<label for="type_ja" class="radio-inline">
  <img class="thumbs" src="assets/images/bottom.png" height="75"></label>