CSS Selector when radio button is checked

Issue

I am using images as a radio buttons:

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

I am hiding the radio button with:

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

The image is made transparent with:

.thumbs{opacity:0.5;}

I would like to remove the opacity filter when the image (= radio button) is clicked. Which CSS selector to use? I have tried

.thumbs:active{opacity:1;}

and

.thumbs:checked{opacity:1;}

With no result. Any suggestions how to remove the opacity filter when image (= radio button) is checked?

Solution

My Example, just change your HTML and 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>

Answered By - Nguyen Toan