ラジオボタンのCSS調整・カスタマイズ

Question

前提・実現したいこと

ラジオボタンのデザインをCSSで調整したいと思います。
基本的なラジオボタンですと、ラジオボタンのマークを押すと選択されると思いますが（参考：BEFORE）、
今回は一定のエリアを押した際、ラジオボタンを選択したと認識されるようにしたいです。（AFTER）

BEFORE

AFTER

発生している問題・エラーメッセージ

該当のソースコード

<li class="c-entryForm__item">
  <div class="c-entryItem">
    <h4>職種</h4>
    <div class="c-entryItem__item --fieldLarge">
      <span>
        <label><input value="1" type="radio" checked="checked" name="user[school_grade]">ビジネス</label>
        <label><input value="2" type="radio" name="user[school_grade]">デザイナー</label>
        <label><input value="3" type="radio" name="user[school_grade]">エンジニア</label>
      </span>
    </div>
  </div>
</li>

試したこと

色々と調べてみたのですが、ググり方が下手といいますか、用語がわからず苦戦しております。。
参考記事でも用語のご紹介のみでも構いませんので教えていただけますと幸いです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

"css radio button"で検索するといろいろなサンプルが出てきますね。
その中でも、
ラジオボタンをCSSで異なる見た目にしてみたメモ
上の記事の「OS選択ラジオボタン」がほぼ同じことをやっているので参考にしてみては。

要点は、

• ラジオボタンそのものは非表示にする
• labelのfor属性を適切にセットすること
• ボタンの見た目はlabelタグのcssで作りこむ

Comments

[SuzukiToshiyasu]

ありがとうございます！！無事解決されました！！