I have 5 passive smileys and below them 5 clickable images that replace the radio buttons.
When you go over it, the transparency (oppacity) changes to 50%. That works well.
What I want is a persistent border around the image when it is selected. Such as with radio buttons.
Is that possible?

This is what I have;

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