Laying google new recaptcha?

Question

I checked the Googles new recaptcha checkbox as follows:

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

When loaded, the contents of the iframe are as follows:

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

Here are the styles defined for the current view:

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

I am trying to achieve this:

I 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 doesn't work?

Thanks, Paul

Answer 1

These styles are located inside an iframe from another domain (google.com), so there is no chance to change them due to the policy of one domain ...

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

Answer 2

First, you forgot the semicolon ';' after the border

 border: 0px !important 

perhaps it is the abolition of white text and border code. I would fix it and see if something changes.

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

If this is not a typo, this is probably why:

You call 2 separate div classes here, but you write them as a div inside a div.

 .rc-anchor .rc-anchor-standard { 

Replace it ^ as follows:

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