title: Style a reCaptcha box within Contact Form 7
body: <p>I'm looking to style a Google reCaptcha (v2 - the one with the checkbox) that is generated by shortcode in the Contact Form 7 WordPress plugin.</p>
  
  <p>The form with the reCaptcha shortcode looks like this: </p>
  
  <pre><code>&lt;label&gt; Your First Name (required)
      [text* first-name] &lt;/label&gt;
  
  &lt;label&gt; Your Last Name (required)
      [text* last-name] &lt;/label&gt;
  
  &lt;label&gt; Phone Number
      [text* phone-number] &lt;/label&gt;
  
  &lt;label&gt; Your Email (required)
      [email* your-email] &lt;/label&gt;
  
  [mc4wp_checkbox id:subscribe-checkbox]
  
  &lt;label&gt; Your Message
      [textarea your-message] &lt;/label&gt;
  
  [honeypot honeypot-939]
  
  [recaptcha id:google-recaptcha]
  
  [submit "Submit"]
  </code></pre>
  
  <p>And when parsed on the website the source code for that <code>#google-recaptcha</code> is:</p>
  
  <pre><code>&lt;div data-sitekey="hidden_" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha" id="google-recaptcha"&gt;
      &lt;div style="width: 304px; height: 78px;"&gt;
          &lt;div&gt;
              &lt;iframe src="https://www.google.com/recaptcha/api2/anchor?k=hidden" title="recaptcha widget" scrolling="no" name="undefined" width="304" height="78" frameborder="0"&gt;
                  &lt;html dir="ltr"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
                      &lt;head&gt;
                          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
                          &lt;style type="text/css"&gt; /* fonts and stuff removed */ &lt;/style&gt;
                          &lt;link rel="stylesheet" type="text/css" href="https://www.gstatic.com/recaptcha/api2/r20170206171236/styles__ltr.css"&gt;
                          &lt;script type="text/javascript" src="scripts-removed"&gt;&lt;/script&gt;
                      &lt;/head&gt;
                      &lt;body&gt;
                              &lt;div class="rc-anchor-alert"&gt;&lt;/div&gt;
                              &lt;input id="recaptcha-token" value="hidden-from-view" type="hidden"&gt;
                              &lt;script&gt;scripts removed&lt;/script&gt;
                              &lt;div class="rc-anchor rc-anchor-normal rc-anchor-light"&gt;
                                  &lt;div class="rc-anchor-aria-status"&gt;
                                      &lt;section&gt;
                                          &lt;span id="recaptcha-accessible-status" aria-live="assertive" aria-atomic="true"&gt;Recaptcha requires verification&lt;/span&gt;
                                      &lt;/section&gt;
                                  &lt;/div&gt;
                              &lt;div class="rc-anchor-error-msg-container" style="display:none"&gt;
                                  &lt;span class="rc-anchor-error-msg"&gt;&lt;/span&gt;
                              &lt;/div&gt;
                              &lt;div class="rc-anchor-content"&gt;
                                  &lt;div class="rc-inline-block"&gt;
                                      &lt;div class="rc-anchor-center-container"&gt;
                                          &lt;div class="rc-anchor-center-item rc-anchor-checkbox-holder"&gt;
                                              &lt;span class="recaptcha-checkbox goog-inline-block recaptcha-checkbox-unchecked rc-anchor-checkbox" role="checkbox" aria-checked="false" id="recaptcha-anchor" tabindex="0" dir="ltr" aria-labelledby="recaptcha-anchor-label"&gt;
                                                  &lt;div class="recaptcha-checkbox-border" role="presentation"&gt;&lt;/div&gt;
                                                  &lt;div class="recaptcha-checkbox-borderAnimation" role="presentation"&gt;&lt;/div&gt;
                                                  &lt;div class="recaptcha-checkbox-spinner" role="presentation"&gt;&lt;/div&gt;
                                                  &lt;div class="recaptcha-checkbox-spinnerAnimation" role="presentation"&gt;&lt;/div&gt;
                                                  &lt;div class="recaptcha-checkbox-checkmark" role="presentation"&gt;&lt;/div&gt;
                                              &lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="rc-inline-block"&gt;
                                      &lt;div class="rc-anchor-center-container"&gt;
                                          &lt;label class="rc-anchor-center-item rc-anchor-checkbox-label" aria-hidden="true" role="presentation" id="recaptcha-anchor-label"&gt;I'm not a robot&lt;/label&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="rc-anchor-normal-footer"&gt;
                                  &lt;div class="rc-anchor-logo-portrait" aria-hidden="true" role="presentation"&gt;
                                      &lt;div class="rc-anchor-logo-img rc-anchor-logo-img-portrait"&gt;&lt;/div&gt;
                                      &lt;div class="rc-anchor-logo-text"&gt;reCAPTCHA&lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="rc-anchor-pt"&gt;
                                      &lt;a href="https://www.google.com/intl/en/policies/privacy/" target="_blank"&gt;Privacy&lt;/a&gt;&lt;span aria-hidden="true" role="presentation"&gt; - &lt;/span&gt;&lt;a href="https://www.google.com/intl/en/policies/terms/" target="_blank"&gt;Terms&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/body&gt;
                  &lt;/html&gt;
              &lt;/iframe&gt;
          &lt;/div&gt;
          &lt;textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; "&gt;
          &lt;/textarea&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Essentialy, I'm just trying to make the reCaptcha box full-width.  So far I have got it to:</p>
  
  <p><a href="https://i.stack.imgur.com/GxUo3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GxUo3.png" alt="enter image description here"></a></p>
  
  <p>By using this css:</p>
  
  <pre><code>#google-recaptcha div {
      width: 100% !important;
  }
  
  #google-recaptcha div &gt; iframe {
      width: 100% !important;
  }
  
  /*#google-recaptcha &gt; div &gt; div &gt; iframe &gt; html &gt; body &gt; div.rc-anchor, #google-recaptcha &gt; div &gt; div &gt; iframe &gt; html &gt; body &gt; div.rc-anchor-normal, #google-recaptcha &gt; div &gt; div &gt; iframe &gt; html &gt; body &gt; div.rc-anchor-light {
      width: 99% !important;
  }*/
  
  #google-recaptcha &gt; div &gt; div &gt; iframe &gt; html &gt; body .rc-anchor.rc-anchor-normal.rc-anchor-light {
      width: 99% !important;
  }
  
   #google-recaptcha &gt; div &gt; div &gt; iframe &gt; html &gt; body &gt; div.rc-anchor-light {
       background: #f6f6f6 !important;
       border: 0px solid #d3d3d3 !important;
       color: #003a79 !important;
   }
  </code></pre>
  
  <p>But as you can see, it's not processing my <code>.rc-anchor</code> styles.  I've tried playing around with different child selectors and things like that but I just can't figure out where I'm going wrong.</p>
  
  <p>When I adjust the width in FireFox inspector, it works and looks the way I want it to, but that is obviously adjusting the Google styles__ltr.css, which must be overriding my CSS regardless of what I try.</p>
  
  <p>Can someone please help me?</p>
  
  <p>Thanks in advance </p>