How To Edit CSS Of Google ReCaptcha

  • Profile Image
    markashton
    Asked on October 13, 2015 at 01:12 PM

    This form: https://form.jotform.com/52855169722968

    Has Google Captcha Widget only as a test.

    In the wizard for this widget ... you can see that one can edit the CSS for the widget.

    I have applied the following CSS:

    .rc-anchor-light {
    background: #fff;
    border: 0px;
    color: #000;
    }

    Can yopu advise me on what I'm doing wrong please ... as the CSS does not work ... and yet in Inspector it appears to do so.

    Many Thanks 

    Regards Mark

     

  • Profile Image
    Welvin
    Answered on October 13, 2015 at 03:47 PM

    Hi Mark,

    Our apologies, but it seems overriding the reCaptcha styles is not possible. Even if you add the !important declaration in the custom CSS, still not working.

    I have forwarded this to our widget team. We will let you know as soon as we get an update about this matter.

    Thank you for reporting.

  • Profile Image
    markashton
    Answered on October 13, 2015 at 04:58 PM

    Oh your joking?

    Another widget that doesn't work properly.

    Who tested this before you released it? No one?

    Who wants a widget that you can't style?

    You put me onto this here: http://www.jotform.com/answers/472573-Form-security-using-a-simple-maths-question but it's not market-ready is it?

    That's another hour gone of my business.

    I wouldn't mind ... but we both know that this will never be fixed.

    Please see what you can do with the devs ... I think this is the best captcha system you have.

    Mark

  • Profile Image
    markashton
    Answered on October 13, 2015 at 05:37 PM

    Hi,

    I've just tested all the other functions ... like height and width.

    Can I just ask ... what is it possible to edit with this widget?

    Is there any parameter that you can edit at all?

    Regards Mark

  • Profile Image
    Welvin
    Answered on October 13, 2015 at 07:06 PM

    Hi Mark,

    Our apologies. I'm sure our developers made some test. But as far as I know, these are settings which are available in every type of widget. We will see when our widget team checks this.

    Thank you for your feedback.

  • Profile Image
    TitusN
    Answered on October 14, 2015 at 12:45 AM

    Hey Mark! 

    The Custom CSS rollout was applied to all Iframe widgets (a type of widget that loads on the form using an Iframe). 

    The idea was to allow users to access the iframe DOM and make customization within reason.  

    ~~

    It works for Google Recaptcha too - only that Google loads its own Iframe inside the widget iframe - which means there is no way to access the Recaptcha DOM - hence no possible customization inside the recaptcha iframe -  see below - 

    You do, however, have access to the area around the recaptcha iframe under the div#recaptcha-body, and you can still use Custom CSS to modify the layout, add a little bit of content among other things:

    See - https://form.jotform.com/52858618633971?

    It's not ideal, but Google are not willing to allow reCaptcha V2 be modified to misrepresent their branding - especially since its a ubiquitous web security feature. 

    Now - how did you want to modify reCaptcha? 

    Let us know - Thanks! 

  • Profile Image
    markashton
    Answered on October 14, 2015 at 10:09 AM

    Great answer ... understood ... don't worry ... no reply required

    Thnak you

    Regards Mark

  • Profile Image
    Arsalan 
    Answered on September 30, 2016 at 02:24 AM

    .rc-anchor-light {
    background: #fff;
    border: 0px;
    color: #000;
    }

    its not working... 
    if there is any alternative ?

  • Profile Image
    name 
    Answered on February 15, 2017 at 06:51 PM

    Merci

  • Profile Image
     
    Answered on March 24, 2017 at 12:04 AM

    To make the reCAPTCHA widget display a different theme, you first need to add the following code in your main HTML page anywhere before the <form> element where reCAPTCHA appears (this will not work if placed after the main script where reCAPTCHA is first invoked):