CODEWITHSUNDEEP
htmlcssiframerecaptcha
Josh16725
Josh16725

Reputation: 53

Recaptcha dark theme displays with extra white space on edges

I'm a new web developer, trying to add the latest Recatpcha to a website with a dark background. It displays with white space on some edges - a recent bug that is also being discussed in the Recaptcha Google group. I'm trying to develop a workaround until they fix it. Recaptcha is displayed as an iframe - so it should be configurable - but none of the properties visible in the DOM looks like "background". How do you force the iframe background to be transparent?

My code is here:

<!DOCTYPE HTML>
<head>
  <style>
  body {
      background-color: rgb(30, 30, 40);
  }
  </style>
  <script src='https://www.google.com/recaptcha/api.js?hl=en'></script>
</head>

<body>
  <div class="g-recaptcha" data-theme="dark" data-sitekey="6LcZuQwTAAAAAA-qE3415DMsfeGdeQ6WWlzm4Lqz"></div>
</body>
</html>

Thanks so much!

Josh

Upvotes: 5

Views: 8312

Answers (2)

szebert
szebert

Reputation: 55

@sinisake pointed directly in the quickest solution. I just modified it to fit it into a React MUI environment with as much pixel perfect corrects as I could. Hope this helps anyone in the same situation. I'm also using reaptcha to integrate Google's reCAPTCHA.

<Grid
  item
  xs={12}
  sx={{
    '.g-recaptcha': {
      overflow: 'hidden',
      width: '302px',
      height: '76px',
      borderRadius: '3px',
    },
  }}
>
  <Reaptcha
    sitekey={envConfig.reCaptchaKey}
    onVerify={(token) => {
      setValue('recaptcha', token);
    }}
    onExpire={() => {
      setValue('recaptcha', null);
    }}
    explicit={false}
    theme={theme.palette.mode}
    size={'normal'}
    hl={'en'}
    isolated={false}
  />
</Grid>

Upvotes: 1

sinisake
sinisake

Reputation: 11328

Quick fix: 

body {
      background-color: rgb(30, 30, 40);
  }
.g-recaptcha {
    overflow:hidden;
    width:298px;
    height:74px;


}
iframe {
  margin:-1px 0px 0px -2px;  

}

Demo: http://jsfiddle.net/76rkfb2w/

As @CookieMan sad, iframe content can't be styled, but, holder of iframe, and iframe box it self - can. So, this should work on dark background...

Upvotes: 6

Related Questions