styling google's new recaptcha checkbox?

Question

I've implemented Googles new recaptcha checkbox like so:

<div class="g-recaptcha" data-sitekey="MY_SITE_KEY"><div>

When loaded the iframe contents look like this:

<div class="rc-anchor rc-anchor-standard">
  ...
</div>

Here are the styles defined for the current look:

.rc-anchor-standard {
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  color: #000;
}

I'm trying to achieve this look:

I've added this to my css file:

.rc-anchor-standard {
  background: #ffffff !important;
  border: 0px !important;
  color: #ffffff !important;
}

The style never changes...any thoughts why this isn't working?

Thanks, -Paul

Answer 1

These styles are located inside a iframe from another domain (google.com), so no chances to change them due to same-domain policy...

You can scale the contents of your div with recaptcha (<div id="g-recaptcha" ... )

#g-recaptcha {
    transform: scale(1.42);
    transform-origin: 0 0 0;
}