サポート » プラグイン » contact form 7のチェックボックス

  • 解決済 espoolflow

    (@espoolflow)


    ワードプレスのcontact form 7におきましてチェックボックスのcssで
    #abc input[type=”checkbox”]:checked ~ .edf {
    display:none;
    }
    というように.edfのクラス内をチェックを入れると表示非表示とさせたいのですが上手く行きません。
    どなたかご教授願えないでしょうか。どうぞよろしくお願いいたします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • こんばんわ。
    実際にやってみました。
    下記は動きます。

    <p>
    <input type="checkbox" id="checkbox" name="hoge" value="1" />
    <label for="checkboxExample"> チェックボックス</label><br />
    </p>
    <style>
    input[type="checkbox"] {
      margin-right: 5px;
    }
    
    input[type="checkbox"]:checked {
      margin-right: 10px;
    }
    </style>

    下記は動きません。

    <p>
    <input type="checkbox" id="checkboxExample" name="hoge" value="1" />
    <label for="checkboxExample"> チェックボックス</label><br />
    <span class="test">テスト</span>
    </p>
    <style>
    input[type="checkbox"] {
      margin-right: 5px;
    }
    
    input[type="checkbox"]:checked .test{
      margin-right: 10px;
    }
    </style>

    僭越ですが
    これはCSSでは無理なのでは?と思います。
    jQueryなどを使用したほうがいいかと思います。

    モデレーター Takayuki Miyoshi

    (@takayukister)

    とりあえずこんな感じにしたらそれっぽい動きはするようです。

    input:checked ~ .wpcf7-list-item-label {
    	display: none;
    }

    Contact Form 7 の場合チェックボックスの後に来る兄弟要素は wpcf7-list-item-label クラスの付いた span 要素(チェックボックスのラベル)のみですので、このセレクタで制御できるのはそこだけです。「.edfのクラス内を〜」というのは無理です。

    また ~ のセレクタは CSS3 での導入のようなので、対応していないブラウザもまだ多く残っていると思います。現時点では jQuery で実現するのが無難でしょう。

    (CSS3 についてはよく把握していないので間違ってたらご指摘ください。)

    スレッド開始 espoolflow

    (@espoolflow)

    ご回答頂きましてありがとうございます。

    おっしゃられるようにブラウザの対応の件もございますのでjQueryで対応するのが良さそうですね。

    jQueryも不慣れなため試行錯誤ですがやってみたいと思います。ご回答頂きましてありがとうございます。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「contact form 7のチェックボックス」には新たに返信することはできません。