埋め込まれた郵便番号のフォームにa：checked擬似クラスを追加する

Question

まず第一に私はウェブ開発者ではないので、私に同行してください。

私は自分のサイトにメールのサインアップフォームを埋め込もうとしています。特定のラジオボタンが選択されていない限り、隠しておきたいチェックボックスが設定されています。

<!-- Begin MailChimp Signup Form --> 
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> 
<style type="text/css"> 

.reveal{ 
    display: none !important; 
} 

#radio-2:checked ~ .reveal { 
    display: inline; 
} 

</style> 
<div id="mc_embed_signup"> 
<form action="n/a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
    <div id="mc_embed_signup_scroll"> 

<div class="mc-field-group input-group"> 
    <strong>Radio Buttons</strong> 
    <ul> 

<li><input type="radio" id="radio-1" value="Radio 1" name="MMERGE6" id="mce-MMERGE6-0"><label for="mce-MMERGE6-0">Radio 1</label></li> 

<li><input type="radio" id="radio-2" value="Part Time" name="MMERGE6" id="mce-MMERGE6-1"><label for="mce-MMERGE6-1">Part Time</label></li> 

</ul> 
</div> 
<div class="mc-field-group input-group reveal"> 
    <ul> 

<li><input type="checkbox" value="1" name="group[18657][1]" id="mce-group[18657]-18657-0"><label for="mce-group[18657]-18657-0">1</label></li> 

<li><input type="checkbox" value="2" name="group[18657][2]" id="mce-group[18657]-18657-1"><label for="mce-group[18657]-18657-1">2</label></li> 

<li><input type="checkbox" value="4" name="group[18657][4]" id="mce-group[18657]-18657-2"><label for="mce-group[18657]-18657-2">3</label></li> 

<li><input type="checkbox" value="8" name="group[18657][8]" id="mce-group[18657]-18657-3"><label for="mce-group[18657]-18657-3">4</label></li> 

</ul> 

</div> 
    <div id="mce-responses" class="clear"> 
     <div class="response" id="mce-error-response" style="display:none"></div> 
     <div class="response" id="mce-success-response" style="display:none"></div> 
    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e7f52c90ee3d55370f2c41bac_8ea8200d35" tabindex="-1" value=""></div> 
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
    </div> 
</form> 
</div> 
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[6]='MMERGE6';ftypes[6]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script> 
<!--End mc_embed_signup--> 

チェックボックスのセットは、2番目のラジオボタンが選択されている場合にのみ表示されます。

私は自分自身のフォームを書くときに動作するようにチェックされていますが、埋め込まれたメールチェンフォーム内で動作するようには見えません。誰にもアイデアはありますか？

Answer 1

いくつかの問題がここにあります：!importantルール

1. スタイルは!importantが含まれていない別のスタイルをオーバーライドすることはできません。これを解決するには、最初のスタイルから削除するだけです。

2. ~兄弟CSSセレクタは、要素with the same parentを配置します。ラジオと.reveal要素は同じ親を共有しないため、.reveal要素は表示されません。

3. ラジオボタンには、2つのid属性を使用しないでください。 2つ以上存在する場合は、2番目のidのみが設定されます。

兄弟セレクタを機能させるためには、あなたはラジオボタンから<ul>と<li>要素を削除し、彼らは別の行に残っているので、彼らの前に改行を追加することができます。 .revealクラス<div>を最初の.mc-field-groupの中に入れます。これは、ラジオボタンが隠し要素と同じ親を持つようにします。ここで

は、更新されたコードは次のようになります。

<!-- Begin MailChimp Signup Form --> 
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> 
<style type="text/css"> 

.reveal { 
    display: none; 
} 

#mce-MMERGE6-1:checked ~ .reveal { 
    display: inline; 
} 

</style> 
<div id="mc_embed_signup"> 
    <form action="n/a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
     <div id="mc_embed_signup_scroll"> 
      <div class="mc-field-group input-group"> 
       <strong>Radio Buttons</strong> 
       <br> 
       <input type="radio" value="Radio 1" name="MMERGE6" id="mce-MMERGE6-0"><label for="mce-MMERGE6-0">Radio 1</label> 
       <br> 
       <input type="radio" value="Part Time" name="MMERGE6" id="mce-MMERGE6-1"><label for="mce-MMERGE6-1">Part Time</label> 
       <div class="reveal"> 
        <ul> 
         <li><input type="checkbox" value="1" name="group[18657][1]" id="mce-group[18657]-18657-0"><label for="mce-group[18657]-18657-0">1</label></li> 
         <li><input type="checkbox" value="2" name="group[18657][2]" id="mce-group[18657]-18657-1"><label for="mce-group[18657]-18657-1">2</label></li> 
         <li><input type="checkbox" value="4" name="group[18657][4]" id="mce-group[18657]-18657-2"><label for="mce-group[18657]-18657-2">3</label></li> 
         <li><input type="checkbox" value="8" name="group[18657][8]" id="mce-group[18657]-18657-3"><label for="mce-group[18657]-18657-3">4</label></li> 
        </ul> 
       </div> 
      </div> 
      <div id="mce-responses" class="clear"> 
       <div class="response" id="mce-error-response" style="display:none"></div> 
       <div class="response" id="mce-success-response" style="display:none"></div> 
      </div> 
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e7f52c90ee3d55370f2c41bac_8ea8200d35" tabindex="-1" value=""></div> 
      <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
     </div> 
    </form> 
</div> 
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[6]='MMERGE6';ftypes[6]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script> 
<!--End mc_embed_signup-->