0

I have a No CAPTCHA reCAPTCHA within a form. However, it looks incredibly out of place.

It seems that the API doesn't allow custom styling (and because it is contained within a cross-domain iframe) as mentioned in the below Stack Overflow Questions:

ReCaptcha API v2 Styling

No CAPTCHA reCAPTCHA Resizing

Both of those questions also focus on styling the reCAPTCHA element for mobile devices. However, all I want is a full width reCAPTCHA on a desktop website.

I have also trawled through a large portion of their own topics page, but nobody seems to be talking about it. https://groups.google.com/forum/#!forum/recaptcha

I'd considered putting a div behind it with a matching background colour to mask the fact that it isn't really 100% width. However, because of Google's desire to follow their own 'Material Guidelines', they've added a drop-shadow to the element, rendering my previous idea useless.

I guess what I'm asking is, does anybody have any workarounds for this?

enter image description here

Community
  • 1
  • 1
Lewis
  • 2,992
  • 19
  • 32
  • You cannot style the html that is loaded into an iframe without having control over google's page which you do not. See this: [using-css-to-affect-div-style-inside-iframe](http://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe) or this: [css-override-body-style-for-content-in-iframe](http://stackoverflow.com/questions/6494721/css-override-body-style-for-content-in-iframe) – Chris L Apr 13 '16 at 19:17
  • Hey - yeah, I mentioned that. I just wondered if someone had a clever work around. For example, I seen a promising one that uses scale - this almost works, I'm just wondering if anyone has any other ideas. – Lewis Apr 13 '16 at 19:18
  • Here is some more good info: [the-iframe-cross-domain-policy-problem](http://blog.cakemail.com/the-iframe-cross-domain-policy-problem/) – Chris L Apr 13 '16 at 19:34

0 Answers0