Reece Dodds Reece Dodds - 3 years ago 355
CSS Question

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

Answer Source

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?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download