所选图像的边框（单选按钮）

Question

亲爱的大家，我有 5 个被动表情符号，下面有 5 个可点击的图像，它们取代了单选按钮。 当您查看它时，透明度（不透明度）会更改为 50%。效果很好。 我想要的是选择图像时图像周围有一个持久的边框。例如单选按钮。 这可能吗？

这就是我所拥有的；

    <div class="mydiv" style="padding-left: 80px">
<input type="radio" name="keuze" value="1" id="radio">
<label for="male-radio1"><img src="img/getal1.jpg"></label>

<input type="radio" name="keuze" value="2" id="radio">
<label for="male-radio2"><img src="img/getal2.jpg"></label>

<input type="radio" name="keuze" value="3" id="radio">
<label for="male-radio3"><img src="img/getal3.jpg"></label>

<input type="radio" name="keuze" value="4" id="radio">
<label for="male-radio4"><img src="img/getal4.jpg"></label>

<input type="radio" name="keuze" value="5" id="radio">
<label for="male-radio5"><img src="img/getal5.jpg"></label>
</div>

    Input[type="radio"]{
    position: absolute;
    opacity: 0;
    width:   0;
    height:  0; 
}

.mydiv :hover{
    opacity:   0.7;
    cursor:    pointer;
}
    
.mydiv img:active {
    opacity:  0.5;
    cursor:   crosshair;
    border:   solid;
    border-color: red;
}

Answer 1

我找到了解决方案，并且效果很好。

<div style="padding-left: 85px">
  <label>
    <input type="radio" name="sc" value="1" />
    <img style="width: 137px" src="img/getal1.jpg">
  </label>
  
  <label>
    <input type="radio" name="sc" value="2"/>
    <img  style="width: 137px" src="img/getal2.jpg">
  </label>
  
  <label>
    <input type="radio" name="sc" value="3" />
    <img  style="width: 137px" src="img/getal3.jpg">
  </label>
  
  <label>
    <input type="radio" name="sc" value="4" />
    <img  style="width: 137px" src="img/getal4.jpg">
  </label>

  <label>
    <input type="radio" name="sc" value="5" />
    <img  style="width: 137px" src="img/getal5.jpg">
  </label>
</div>

CSS

label > input{ /* HIDE RADIO */
  display:none;
}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}

label > input:hover + img{ /* (CHECKED) IMAGE STYLES */
  opacity:   0.7;
}


label > input:checked + img{ /* (CHECKED) IMAGE STYLES */
  border:2px solid;
  border-color: blue;
}