実現したいこと
疑似要素で作ったチェックボックスをcontact form 7で出力されたcheckboxでも動作させたい
発生している問題・分からないこと
チェックボックスのレイアウトを変えたいので本物のcheckboxをdisplay: none;で非表示にし、その隣にあるspanに疑似要素を使って疑似チェックボックスを作りました。
beforeが外枠、afterがチェックマークになっています。
checkboxと隣にあるspanのテキストをlabelで囲い、spanのテキストをクリックしてもチェックボックスにチェックが入るようにしています。
HTMLファイルの状態ではこれうまく作動するのですが、phpファイルに書き写しプラグインのcontact form 7でチェックボックスを作り直すとcheckboxがwpcf7から始まるクラスで何重にも囲まれてしまい構造が変わってしまうせいかいくらクリックしても疑似チェックボックスがうまく動作しなくなってしまいます。
しかしdisplay: none;で非表示にした本物のチェックボックスにはちゃんとチェックは入っているのは確認できているので疑似要素やcheckedの部分がうまく行っていないのだと思うのですが、階層が複雑になりすぎてcssをどう改善したらいいか全く分かりません。
以下、名前がHTML後となっているコードがcontact form 7を使った後のHTMLになります。
該当のソースコード
HTML前
1<label for="privacy"> 2 <input type="checkbox" id="privacy"> 3 <span class="page-contact-form__privacy-text">利用規約と個人情報の<br class="br--sp">取り扱いについて同意する</span> 4</label>
CSS
1input[type="checkbox"] { 2 display: none; 3 4 &:checked { 5 & + span { 6 &::before { 7 border: none; 8 background-color: #4169E1; 9 } 10 11 &::after { 12 opacity: 1; 13 } 14 } 15 } 16 17 & + span { 18 padding-left: 32px; 19 position: relative; 20 21 &::before { 22 content: ""; 23 width: 20px; 24 height: 20px; 25 background-color: config.$bg-color-w; 26 border: 1px solid config.$text-color; 27 border-radius: 2px; 28 position: absolute; 29 top: 50%; 30 left: 0; 31 transform: translateY(-50%); 32 } 33 34 &::after { 35 content: ""; 36 width: 18px; 37 height: 8px; 38 border-bottom: 4px solid config.$bg-color-w; 39 border-left: 4px solid config.$bg-color-w; 40 position: absolute; 41 top: 10px; 42 left: 1px; 43 transform: translateY(-50%) rotate(-45deg); 44 opacity: 0; 45 } 46 } 47}
HTML後
1<label for="privacy"> 2 <span class="wpcf7-form-control-wrap" data-name="privacy-contact"> 3 <span class="wpcf7-form-control wpcf7-acceptance"> 4 <span class="wpcf7-list-item"> 5 <input type="checkbox" name="checkbox" value="1" id="privacy" aria-invalid="false"> 6 </span> 7 </span> 8 </span> 9 <span class="page-contact-form__privacy-text">利用規約と個人情報の<br class="br--sp">取り扱いについて同意する</span> 10</label> 11
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
⓵入れ子構造をやめてコードを書く。
②input[type-"checkbox"]を.wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item input[type-"checkbox"] のように詳細度をあげてcssを書く
③& + span を & ~ .page-contact-form__privacy-textとしてみる
など試しました。
他にもChat GPTを中心に色々複雑なものを試しましたが無理でした。
補足
特になし
![guest](/img/icon/icnUserSample.jpg)
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/07/15 01:55