HTMLとCSSで、フォームのラジオボタンやチェックボタンの代わりに画像選択にする方法の紹介です。
Before
After
目次
HTMLとCSS
<div>
<input id="image_a" type="radio" value="image_a.jpg" name="image">
<label for="image_a"><img src="/images/image_a.jpg" with="40" height="40"></label>
<input id="image_b" type="radio" value="image_b.jpg" name="image">
<label for="image_b"><img src="/images/image_b.jpg" with="40" height="40"></label>
<input id="image_c" type="radio" value="image_c.jpg" name="image">
<label for="image_c"><img src="/images/image_c.jpg" with="40" height="40"></label>
</div>/* ラジオボタンの○を消す */
input[type="radio"] {
display: none;
}
/* 画像の周りに隙間をあける */
label img {
margin: 3px;
padding: 5px;
}
/* 未選択の場合、色を薄くする */
input[type="radio"] + label img {
opacity:0.2;
}
/* 選択済みの場合、色を濃くする */
input[type="radio"]:checked + label img {
opacity:1;
}ラジオボタン・チェックボタンを画像にする手順
①label＋imgを足す
<label for="image_a">
<img src="/images/image_a.jpg" with="40" height="40">
</label>labelタグの中で画像を表示します。
labelタグのforはinputのidと揃えます。ここでは、inputのid=“image_a”とlabel for =“image_a”を揃えています。
②CSSでラジオボタン を非表示
input[type="radio"] {
display: none;
}③画像の選択／未選択で表示を変える
input[type="radio"] + label img {
opacity:0.2;
}
input[type="radio"]:checked + label img {
opacity:1;
}サンプルコード
See the Pen ラジオボタンを画像で表示 by Emi (@filledforest) on CodePen.