どうも、7noteです。ラジオボタンのデザインを変更して、オシャレなケーキに変えてしまう方法を紹介
ラジオボタンのあの「〇」って、好きなデザインに変更する方法があるってご存知でしたか？
通常のラジオボタンは機種やブラウザによってちがいますが、こんな感じのシンプルなものが多いですが・・・
普通のラジオボタン
これを好きなデザインに変えてしまいましょう。
せっかくなので美味しそうなものに変えてみましょう。
label要素を使うので、label要素って何？という方は前回の記事をご覧ください。
【初心者でもわかる】フォーム作りに必須！inputとlabelを紐づける方法
材料はこちら(1人前)
| ファイル | CSSプロパティ | 意味 |
|---|---|---|
| index.html | inputタグ labelタグ | ボタンやフォームなどを書く時に使うもの inputと紐づけて使うもの |
| style.css | 疑似要素っていいます。今回は両方使います。 | |
| cake01.png | ショートケーキの画像 | |
| cake02.png | チョコケーキの画像 | |
| cake03.png | カップケーキの画像 |
作り方
- index.htmlにラジオボタンを用意。
- style.cssで、inputを見えなくして、beforeにお皿を用意。
- チェックされた時、afterにそれぞれのケーキを用意して完成。
1.index.htmlにラジオボタンを用意。
index.html
<ulclass="select"><li><inputtype="radio"name="cake"id="cake01"><labelfor="cake01">ショートケーキ</label></li><li><inputtype="radio"name="cake"id="cake02"><labelfor="cake02">チョコケーキ</label></li><li><inputtype="radio"name="cake"id="cake03"><labelfor="cake03">カップケーキ</label></li></ul>2.style.cssで、inputを見えなくして、beforeにお皿を用意。
style.css
ulli{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;}＼完成／
解説・作り方のコツ
- inputは、labelタグの前に書きます。そうすることで、:checkedでチェックの判定ができるのでその結果を次のlabel要素に反映することができます。
- 反映させるには隣接セレクタ（+）を使い、:checkedがある時のみ:afterを表示するように作っています。
まとめ
一番好きなケーキはいちごのショートケーキ。
素材データ配布
真似して作りたい人はこの画像をダウンロードして使ってください！
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ