ラジオボタン・チェックボタンの代わりに画像選択にする方法

1
<div>
2
  <input id="image_a" type="radio" value="image_a.jpg" name="image">
3
  <label for="image_a"><img src="/images/image_a.jpg" with="40" height="40"></label>
4
  <input id="image_b" type="radio" value="image_b.jpg" name="image">
5
  <label for="image_b"><img src="/images/image_b.jpg" with="40" height="40"></label>
6
  <input id="image_c" type="radio" value="image_c.jpg" name="image">
7
  <label for="image_c"><img src="/images/image_c.jpg" with="40" height="40"></label>
8
</div>

1
/* ラジオボタンの○を消す */
2
input[type="radio"] {
3
    display: none;
4
}
5
/* 画像の周りに隙間をあける */
6
label img {
7
    margin: 3px;
8
    padding: 5px;
9
}
10
/* 未選択の場合、色を薄くする */
11
input[type="radio"] + label img {
12
    opacity:0.2;
13
  }
14
/* 選択済みの場合、色を濃くする */
15
input[type="radio"]:checked + label img {
16
    opacity:1;
17
}