Search code examples
csscss-selectorsrecaptcha

Style a reCaptcha box within Contact Form 7

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.

The form with the reCaptcha shortcode looks like this: 

<label> Your First Name (required)
    [text* first-name] </label>

<label> Your Last Name (required)
    [text* last-name] </label>

<label> Phone Number
    [text* phone-number] </label>

<label> Your Email (required)
    [email* your-email] </label>

[mc4wp_checkbox id:subscribe-checkbox]

<label> Your Message
    [textarea your-message] </label>

[honeypot honeypot-939]

[recaptcha id:google-recaptcha]

[submit "Submit"]

And when parsed on the website the source code for that #google-recaptcha is:

<div data-sitekey="hidden_" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha" id="google-recaptcha">
    <div style="width: 304px; height: 78px;">
        <div>
            <iframe src="https://www.google.com/recaptcha/api2/anchor?k=hidden" title="recaptcha widget" scrolling="no" name="undefined" width="304" height="78" frameborder="0">
                <html dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                    <head>
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <style type="text/css"> /* fonts and stuff removed */ </style>
                        <link rel="stylesheet" type="text/css" href="https://www.gstatic.com/recaptcha/api2/r20170206171236/styles__ltr.css">
                        <script type="text/javascript" src="scripts-removed"></script>
                    </head>
                    <body>
                            <div class="rc-anchor-alert"></div>
                            <input id="recaptcha-token" value="hidden-from-view" type="hidden">
                            <script>scripts removed</script>
                            <div class="rc-anchor rc-anchor-normal rc-anchor-light">
                                <div class="rc-anchor-aria-status">
                                    <section>
                                        <span id="recaptcha-accessible-status" aria-live="assertive" aria-atomic="true">Recaptcha requires verification</span>
                                    </section>
                                </div>
                            <div class="rc-anchor-error-msg-container" style="display:none">
                                <span class="rc-anchor-error-msg"></span>
                            </div>
                            <div class="rc-anchor-content">
                                <div class="rc-inline-block">
                                    <div class="rc-anchor-center-container">
                                        <div class="rc-anchor-center-item rc-anchor-checkbox-holder">
                                            <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">
                                                <div class="recaptcha-checkbox-border" role="presentation"></div>
                                                <div class="recaptcha-checkbox-borderAnimation" role="presentation"></div>
                                                <div class="recaptcha-checkbox-spinner" role="presentation"></div>
                                                <div class="recaptcha-checkbox-spinnerAnimation" role="presentation"></div>
                                                <div class="recaptcha-checkbox-checkmark" role="presentation"></div>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="rc-inline-block">
                                    <div class="rc-anchor-center-container">
                                        <label class="rc-anchor-center-item rc-anchor-checkbox-label" aria-hidden="true" role="presentation" id="recaptcha-anchor-label">I'm not a robot</label>
                                    </div>
                                </div>
                            </div>
                            <div class="rc-anchor-normal-footer">
                                <div class="rc-anchor-logo-portrait" aria-hidden="true" role="presentation">
                                    <div class="rc-anchor-logo-img rc-anchor-logo-img-portrait"></div>
                                    <div class="rc-anchor-logo-text">reCAPTCHA</div>
                                </div>
                                <div class="rc-anchor-pt">
                                    <a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a><span aria-hidden="true" role="presentation"> - </span><a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a>
                                </div>
                            </div>
                        </div>
                    </body>
                </html>
            </iframe>
        </div>
        <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; ">
        </textarea>
    </div>
</div>

Essentialy, I'm just trying to make the reCaptcha box full-width. So far I have got it to:

enter image description here

By using this css:

#google-recaptcha div {
    width: 100% !important;
}

#google-recaptcha div > iframe {
    width: 100% !important;
}

/*#google-recaptcha > div > div > iframe > html > body > div.rc-anchor, #google-recaptcha > div > div > iframe > html > body > div.rc-anchor-normal, #google-recaptcha > div > div > iframe > html > body > div.rc-anchor-light {
    width: 99% !important;
}*/

#google-recaptcha > div > div > iframe > html > body .rc-anchor.rc-anchor-normal.rc-anchor-light {
    width: 99% !important;
}

 #google-recaptcha > div > div > iframe > html > body > div.rc-anchor-light {
     background: #f6f6f6 !important;
     border: 0px solid #d3d3d3 !important;
     color: #003a79 !important;
 }

But as you can see, it's not processing my .rc-anchor 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.

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.

Can someone please help me?

Thanks in advance

Solution

  • You can't use CSS selectors for elements inside an iframe, though you can style the iframe itself.

    See Css–selector for when a html-document is inside an iframe?