【お問い合わせ】No.4 radioボタンをカスタマイズしよう!
Share
こんなことを説明しています!
- ラジオボタンのカスタマイズ方法(2種類)
解説動画
コードの解説
前回までの記事はこちら
HTMLの記述
<div class="inner"> <h2 class="title">お問い合わせフォーム<br>No.4 radioボタンをカスタマイズしよう!</h2> <form action="" class="form"> <div class="row"> <div class="head"><span class="must">氏名</span></div> <div class="data"><input type="text" placeholder="ヤマダ タロウ"></div> </div> <div class="row"> <div class="head"><span class="must">メールアドレス</span></div> <div class="data"><input type="email" placeholder="info@example.com"></div> </div> <div class="row"> <div class="head"><span>性別</span></div> <div class="data radio-wrap"> <label for="man"> <input type="radio" id="man" name="gender" checked> <span>男</span> </label> <label for="woman"> <input type="radio" id="woman" name="gender"> <span>女</span> </label> </div> </div> <div class="row"> <div class="head"><span>shopify構築者は?</span></div> <div class="data"> <div class="data radio-wrap2"> <label for="maitake"> <input type="radio" id="maitake" name="kinoko" checked> <span>まいたけ</span> </label> <label for="matitake"> <input type="radio" id="matitake" name="kinoko"> <span>まちたけ</span> </label> <label for="matutake"> <input type="radio" id="matutake" name="kinoko"> <span>まつたけ</span> </label> </div> </div> </div> <div class="row"> <div class="head"><span class="must">ご依頼内容<br>(複数選択可)</span></div> <div class="data checkbox-wrap"> <label for="lp"> <input type="checkbox" id="lp"> <span>LP</span> </label> <label for="corporate"> <input type="checkbox" id="corporate"> <span>コーポレートサイト</span> </label> <label for="wp"> <input type="checkbox" id="wp"> <span>WordPress構築</span> </label> <label for="modify"> <input type="checkbox" id="modify"> <span>修正</span> </label> <label for="other"> <input type="checkbox" id="other"> <span>その他</span> </label> </div> </div> <div class="row ai-start"> <div class="head"><span class="must">お問い合わせ内容</span></div> <div class="data"><textarea placeholder="こちらに具体的にご入力ください"></textarea></div> </div> </form> </div>
ポイント/手順
- checkbox同様 label > input + spanの形式で記述
- name属性を揃えて、それぞれのラジオボタン同士を紐付けさせる
- 最初にチェックしておきたいものにcheckedをつける
CSSの記述
//1つ目のラジオボタン .radio-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; label { //デフォルトのラジオボタンを消す input[type=radio] { display: none; } //テキスト部分 カスタマイズしたラジオボタン span { display: inline-block; // background: #c5c5c562; padding-left: 30px; font-size: 20px; position: relative; //枠組み &::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 20px; height: 20px; border: 1px solid #000; border-radius: 50%; } //チェック &::after { content: ''; position: absolute; top: calc(50%); transform: translateY(-50%); left: 2.5px; width: 15px; height: 15px; border-radius: 50%; background: #000; opacity: 0; // とりあえず消す } } input[type=radio]:checked + span::after { opacity: 1; } &:hover { cursor: pointer; } } } //2つ目のラジオボタン .radio-wrap2 { display: flex; align-items: center; flex-wrap: wrap; label { flex: 1; //デフォルトのラジオボタンを消す input[type=radio] { display: none; } //テキスト部分 カスタマイズしたラジオボタン span { display: inline-block; // background: #c5c5c562; padding: 20px; font-size: 20px; position: relative; border: 1px solid #000; width: 100%; text-align: center; } //被っているborderを片方消す &:not(:last-of-type) { span { border-right: none; } } input[type=radio]:checked + span { background: #000; color: #fff; } &:hover { cursor: pointer; } } }
ポイント/手順
- checkboxで使用したものをコピペしてradio仕様に変えていく(特にポイントなどはないので動画をご参照ください)