先日上がってきたデザインに対して、これどうやって実現するの？とめちゃくちゃ困って、フロントエンドエンジニアさんに聞いて解決した話です.
ラジオボタンを画像にする
<html>
<head>
<link rel="stylesheet" type="text/css" href="./static/css/main.css">
</head>
<body>
<input type="radio" id="check1" name="check" />
<label for="check1"></label>
<input type="radio" id="check2" name="check"/>
<label for="check2"></label>
<input type="radio" id="check3" name="check"/>
<label for="check3"></label>
<input type="radio" id="check4" name="check"/>
<label for="check4"></label>
</body>
</html>
input[type="radio"]{
display: none;
}
input[type="radio"] + label {
position: relative;
margin:10px;
display: inline-block;
background-image:url("../img/present.png");
background-repeat: no-repeat;
background-size:contain;
width: 100px;
height:100px;
}
input[type="radio"]:checked + label {
background-image:url("../img/win.png");
background-repeat: no-repeat;
background-size:contain;
width: 100px;
height:100px;
}
(若干CSSが冗長)
結果
ポイント
隣接セレクタといって、 +で結合するとある要素の直後の要素に対して、CSSを当てることができる.
また、> は子セレクタといって子要素にあてることができる.
例
<div>
<p>子セレクタに適用</p>
</div>
<p>隣接セレクタに適用</p>
<p>どちらでもないから色がかわらない</p>
div + p {
color :#808000;
}
div > p {
color :#800000;
}
##結果
終わり
できたー！って出したcheckboxの使用例の画像がよくなくて、それそもそもradioボタンじゃなくてよくない？ってなってるかもしれないですが、htmlで出るラジオボタンより、もうちょっとおしゃれな感じのラジオボタンの画像にしたかったのです
以上、無駄にjsを使わないで簡単にラジオボックスのボタンを画像にする方法でした！