<div class="sample-form">
  <input id="image_a" type="radio" value="image_a.jpg" name="image">
  <label for="image_a"><img src="https://emmieworks.github.io/open-labo/assets/icons/image_a.png" width="40" height="40"></label>
  <input id="image_b" type="radio" value="image_b.jpg" name="image">
  <label for="image_b"><img src="https://emmieworks.github.io/open-labo/assets/icons/image_b.png" width="40" height="40"></label>
  <input id="image_c" type="radio" value="image_c.png" name="image">
  <label for="image_c"><img src="https://emmieworks.github.io/open-labo/assets/icons/image_c.png" width="40" height="40"></label>
</div>
/* ラジオボタンの○を消す */
.sample-form input[type="radio"] {
/*    display: none;*/
}
/* 画像の周りに隙間をあける */
.sample-form label img {
    margin: 3px;
    padding: 5px;
}
/* 未選択の場合、色を薄くする */
.sample-form input[type="radio"] + label img {
    opacity:0.2;
  }
/* 選択済みの場合、色を濃くする */
.sample-form input[type="radio"]:checked + label img {
    opacity:1;
}

/* 未選択の場合、色を薄くする */
.sample-form input[type="radio"] + label img {
    opacity:0.2;
  }
/* 選択済みの場合、色を濃くする */
.sample-form input[type="radio"]:checked + label img {
    opacity:1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.