JSFiddle - React, Tailwind, and code Playground

by ivanovsuper

HTML

<input id="radio_ava8" class="ava_radio" name="a1" type="radio" value="1"/>  
<label class="ava_img" for="radio_ava8">            
    <img src="http://www-03.ibm.com/software/lotus/symphony/gallery.nsf/GalleryClipArtAll/BDBA6300C8009A85852575960030C64D/$File/Sign-RadioButton02-Unchecked.png" width="100"  height="100" />
</label>

<input id="radio_ava9" class="ava_radio" name="a1" type="radio" value="1" />  
<label class="ava_img" for="radio_ava9">            
    <img src="http://www-03.ibm.com/software/lotus/symphony/gallery.nsf/GalleryClipArtAll/BDBA6300C8009A85852575960030C64D/$File/Sign-RadioButton02-Unchecked.png" width="100"  height="100" />
</label>

CSS

.ava_radio  {display: none;}
.ava_radio + .ava_img > img {
    border:solid 3px white;
    border-radius:50px;
}  
.ava_radio:checked + .ava_img > img {
    border:solid 3px green;
    border-radius:50px;
}

JavaScript

if (($.browser.msie && $.browser.version <= 7.0)) {
    var changeSel = function() {
        $(".ava_radio:checked + .ava_img > img").css({
            "border": "solid 3px green",
            "border-radius": "50px"
        });
        $(".ava_radio:not(:checked) + .ava_img > img").css({
            "border": "solid 3px white",
            "border-radius": "50px"
        });
    };
    $(".ava_radio").change(changeSel);
    changeSel();
}