ラジオボタンをON・OFF切替できる画像にするCSS

先生、片方を選択したらもう１つは解除されるボタンを設置したいんですよ。

それならラジオボタンを使うといいです。

ラジオボタンだと地味なんですよね。

ではラジオボタンを画像に代えて、ON・OFF切替できるCSSを教えますね！

YESとNOをクリック・タップして動作を確認してください。

そうです。これです！

CSS
HTML

CSS

input[type=radio]+label:before {
    content: "";
    display: inline-block;
    background-size: contain;
    width: 130px;
    height: 130px;
    background-repeat: no-repeat;
    }
input[type=radio][value="answer_yes"]+label:before {
    background-image: url(YESのOFF画像URL);
}
input[type=radio][value="answer_no"]+label:before {
    background-image: url(NOのOFF画像URL);
}
input[type=radio][value="answer_yes"]:checked+label:before {
    background-image: url(YESのON画像URL);
}
input[type=radio][value="answer_no"]:checked+label:before {
    background-image: url(NOのON画像URL);
}
input[type=radio] {
    display: none;
}

input[type=radio]+label:beforeで画像の表示を指定する。
input[type=radio][value="同じ名前のinputタグのid属性とlabelのfor属性"]+label:before {}でチェックされてない状態を指定する。
input[type=radio][value="同じ名前のinputタグのid属性とlabelのfor属性"]:checked+label:before {}でチェックされた状態を指定する。
display: none;ラジオボタンを非表示にする。

HTML

<input type="radio" name="answer" value="answer_yes" id="answer_yes" /><label for="answer_yes"></label>
<input type="radio" name="answer" value="answer_no" id="answer_no" /><label for="answer_no">

inputタグのid属性とlabelタグのfor属性を同じ名前にして紐付ける。

これをコピペして画像URLだけ変更すればすぐ使えますね！

コピペで使えますが表示の調整が必要です。