どうも、7noteです。ラジオボタンのデザインを変更して、オシャレなアイコン（見本ではケーキ）に変えてしまう方法を紹介

ラジオボタンのあの「〇」って、好きなデザインに変更する方法があるってご存知でしたか？
通常のラジオボタンは機種やブラウザによってちがいますが、こんな感じのシンプルなものが多いですが・・・

普通のラジオボタン

これを好きなデザインに変えてしまいましょう。
せっかくなので美味しそうなものに変えてみましょう。

label要素を使うので、label要素って何？という方は前回の記事をご覧ください。
【初心者でもわかる】フォーム作りに必須！inputとlabelを紐づける方法

材料はこちら(1人前)

ファイル	CSSプロパティ	意味
index.html	inputタグ labelタグ	ボタンやフォームなどを書く時に使うもの inputと紐づけて使うもの
style.css	~~::before~~ ::after	疑似要素っていいます。今回は両方使います。
cake01.png		ショートケーキの画像
cake02.png		チョコケーキの画像
cake03.png		カップケーキの画像

作り方

index.htmlにラジオボタンを用意。

style.cssで、inputを見えなくして、beforeにお皿を用意。

チェックされた時、afterにそれぞれのケーキを用意して完成。

1.index.htmlにラジオボタンを用意。

index.html

<ul class="select">
  <li><input type="radio" name="cake" id="cake01"><label for="cake01">ショートケーキ</label></li>
  <li><input type="radio" name="cake" id="cake02"><label for="cake02">チョコケーキ</label></li>
  <li><input type="radio" name="cake" id="cake03"><label for="cake03">カップケーキ</label></li>
</ul>

2.style.cssで、inputを見えなくして、beforeにお皿を用意。

style.css

ul li {
  padding-left: 20px;
}

input {
  display: none;
}

label::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url(dish.png) no-repeat;
}

3. クリックされた時、afterにそれぞれのケーキを用意して完成。

style.css

label {
  position: relative;
}

input:checked + label::after {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

input#cake01:checked + label::after { background: url(cake01.png) no-repeat; }
input#cake02:checked +label::after { background: url(cake02.png) no-repeat; }input#cake03:checked + label::after { background: url(cake03.png) no-repeat; }