1

https://developers.google.com/recaptcha/docs/display

I would like to know how to apply styling to the image selector.

grecaptcha.render(
  container,
  parameters
)

According to the document: container is the HTML element to render the reCAPTCHA widget. Specify either the ID of the container (string) or the DOM element itself.

Then, I try to apply css to the container and pass it to the render method. However, it only applies to the grecaptcha-badge div.

I have no idea how to adjust the image-selector position.

visibility: visible; position: absolute; width: 1303px; top: 146px;

It seems the style is controlled by the google js: https://www.google.com/recaptcha/api.js What could I do to edit the image-selector's style?

starf15h
  • 1,469
  • 2
  • 9
  • 12
  • Similar: https://stackoverflow.com/questions/27713505/recaptcha-api-v2-styling – Timothy Chen Mar 29 '21 at 02:54
  • @TimothyChen. I just want to put the image-selector at the center of the page. However, it appears at the top of the page. I just want to know how the google recaptcha calculate the top px. – starf15h Mar 29 '21 at 03:09
  • position:fixed;top:50%;left:50%;transform:translate(-50%, -50%) – CleverSkull Dec 20 '22 at 22:00

1 Answers1

-2

This question is quite old, but for those who want to customize the reCAPTCHA here is a solution: https://custom-captcha.com/

It has no image captchas but instead uses the new reCAPTCHA v3 in the background. You can customize the logo, the text, and the brand name as well. Also you can apply any CSS you want to it.

CleverSkull
  • 479
  • 3
  • 10