【お問い合わせ】No.3 checkboxをカスタマイズしよう!
Share
こんなことを説明しています!
- htmlの書き方の注意点(wpプラグインにスムーズに移行できるような書き方)
- デフォルトのcheckboxを消して、カスタマイズする方法
解説動画
コードの解説
前回までの記事はこちら
HTMLの記述
<div class="inner"> <h2 class="title">お問い合わせフォーム<br>No.3 checkboxをカスタマイズしよう!</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 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>
ポイント/手順
- dataにcheckbox-wrapクラスを追加
- label内にinput + spanを配置
- label[for]とinput[id]を連携させる
この書き方をしておけば、WordPress移行時にcontact form7やmw wp formのプラグインを入れたときにcssがそのまま当たる形になります!
(※不要なpタグ等が自動挿入される場合は、それを消しておく必要がありますが...)
CSSの記述
//====================== // 今回のテーマ //====================== .checkbox-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .checkbox-wrap label { //デフォルトのチェックボックスを消す input[type=checkbox] { 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: 15px; height: 15px; border: 1px solid #000; } //チェック &::after { content: ''; position: absolute; top: calc(50% - 1px); transform: translateY(-50%) rotate(45deg); left: 5px; width: 6px; height: 12px; border-right: 2px solid #000; border-bottom: 2px solid #000; opacity: 0; // とりあえず消す } } input[type=checkbox]:checked + span::after { opacity: 1; } &:hover { cursor: pointer; } }
ポイント/手順
- checkbox-wrapに横並びの指定
- input[type=checkbox]を非表示にする(デフォルトのものを削除)
- spanタグに擬似要素でboxの枠線やチェックを実装する
- 最後に input[type="checkbox"]:checked + span::after でチェックを表示させる
※input[type="checkbox"]はlabelと連携しているので
「labelをチェックしたら、input[checkbox]の次の要素のspanの擬似要素に以下のプロパティを設定する」
という意味になります!