疑似要素で作ったチェックボックスがうまく動作しない

Question

実現したいこと

疑似要素で作ったチェックボックスを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になります。

該当のソースコード

<label for="privacy">
    <input type="checkbox" id="privacy">
    <span class="page-contact-form__privacy-text">利用規約と個人情報の<br class="br--sp">取り扱いについて同意する</span>
</label>

input[type="checkbox"] {
    display: none;

    &:checked {
        & + span {
            &::before {
                border: none;
                background-color: #4169E1;
            }

            &::after {
                opacity: 1;
            }
        }
    }

    & + span {
        padding-left: 32px;
        position: relative;

        &::before {
            content: "";
            width: 20px;
            height: 20px;
            background-color: config.$bg-color-w;
            border: 1px solid config.$text-color;
            border-radius: 2px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }

        &::after {
            content: "";
            width: 18px;
            height: 8px;
            border-bottom: 4px solid config.$bg-color-w;
            border-left: 4px solid config.$bg-color-w;
            position: absolute;
            top: 10px;
            left: 1px;
            transform: translateY(-50%) rotate(-45deg);
            opacity: 0;
        }
    }
}

<label for="privacy">
    <span class="wpcf7-form-control-wrap" data-name="privacy-contact">
        <span class="wpcf7-form-control wpcf7-acceptance">
            <span class="wpcf7-list-item">
                <input type="checkbox" name="checkbox" value="1" id="privacy" aria-invalid="false">
            </span>
      </span>
    </span>
    <span class="page-contact-form__privacy-text">利用規約と個人情報の<br class="br--sp">取り扱いについて同意する</span>
</label>

試したこと・調べたこと

• 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を中心に色々複雑なものを試しましたが無理でした。

補足

特になし

Answer 1

:has()疑似クラスを使えばどうでしょう。

input[type="checkbox"] {
    display: none;
}

labellabel[for="privacy"]  {
    &:has(#privacy:checked) {
        & span {
            &::before {
                border: none;
                background-color: #4169E1;
            }

            &::after {
                opacity: 1;
            }
        }
    }

    & span {
        padding-left: 32px;
        position: relative;

        &::before {
            content: "";
            width: 20px;
            height: 20px;
            background-color: white;
            border: 1px solid black;
            border-radius: 2px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }

        &::after {
            content: "";
            width: 18px;
            height: 8px;
            border-bottom: 4px solid white;
            border-left: 4px solid white;
            position: absolute;
            top: 10px;
            left: 1px;
            transform: translateY(-50%) rotate(-45deg);
            opacity: 0;
        }
    }
}

Comments

[obito]

label {
&:has(#privacy:checked) {
& span {
&::before {
border: none;
background-color: #4169E1;
}

&::after {
opacity: 1;
}
}
}

.page-contact-form__privacy-text {
color: config.$text-color;
line-height: 24px;
letter-spacing: 1.6px;
display: inline-block;
padding-left: 32px;
position: relative;

@include mixin.mq(sp) {
margin-top: 12px;
}

&::before {
content: "";
width: 20px;
height: 20px;
background-color: white;
border: 1px solid black;
border-radius: 2px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}

&::after {
content: "";
width: 18px;
height: 8px;
border-bottom: 4px solid white;
border-left: 4px solid white;
position: absolute;
top: 10px;
left: 1px;
transform: translateY(-50%) rotate(-45deg);
opacity: 0;
}
}
}

参考にして上の用に少し変えてみたところうまくいきました
ありがとうございました！

Answer 2

id を指定してもラッパーに反映されるだけで、input自身には付きません。
そこで functions で強制的に input に id を入れてしまうという方法もあります。

【cf7でチェックボックスを作成】

1. cf7 でチェック0. ボックスを作成する際、「個々の項目を label 要素で囲む」のチェックを外しておく
2. 番号リストオプションは付けない
3. (nameは適当にppにしています)
   [checkbox pp] ← 出来たショートコードに 空のオプションを追加し、自作のlabelを追加
   [checkbox pp ""]<label for="pp">プライバシーポリシー</label> ← のように書き換えます

この状態ですと、チェックボックスにidが付かないので何も反応しませんよね
これを functions で書き換えます
【functions.php に記載】

add_filter('wpcf7_form_elements', 'add_checkbox_id');
function add_checkbox_id ($form){
  $form = str_replace('<input type="checkbox" name="pp', '<input id="pp" type="checkbox" name="pp', $form);
  return $form;
}

name="pp' の部分は、実際の name に合わせて下さい。

このやり方で、classも入れられます^^