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>

enter image description here

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:

enter image description here

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

http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe — MrPk, Nov 24 '14 at 16:45
@paul I'm facing the same problem. Were you able to solve it-If yes, how? — Sleek Geek, Jan 28 '15 at 16:32
I am trying to do something similar, I want to add my own custom error-messages to the div with the "rc-anchor-alert" class. I am unable to access it using JQuery. — Bryan, Mar 20 '15 at 18:07

TnT · Answer 1 · 2015-03-29T21:37:34.410

2

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;
}

edited Mar 29 '15 at 21:37

answered Mar 29 '15 at 21:20

TnT

knocked loose · Answer 2 · 2014-11-24T16:36:36.140

-3

First things first, you forgot a semicolon ';' after border,

border: 0px !important

perhaps that is canceling the white text and border code. I would fix that and see if anything changes.

========================================

If this isn't another typo, this may be why:

You are calling 2 seperate div classes here, but you have them written as a div inside a div.

.rc-anchor .rc-anchor-standard {

Replace that ^ with this v:

.rc-anchor, .rc-anchor-standard {

edited Nov 24 '14 at 16:36

answered Nov 24 '14 at 16:23

knocked loose

sorry the missing semi colon was a typo when posting. Unfortunately the div is loaded via iframe that Google uses after the DOM is ready so I don't have access to it. – Paul Nov 24 '14 at 16:29
This isn't helpful for getting to a resolution the OQ. – Bryan Mar 20 '15 at 18:06

2 Answers2