2

I have the following page HERE, and basically as you can see there is a google captcha , now I needed the box-shadow and the border gone so I applied the following styles:

.rc-anchor-light { border: none !important;} .rc-anchor { box-shadow: none !important;}

The above doesn't work as the captcha is loaded in an iframe, so after surfing SO for a while I came up with the following solution:

$('.g-recaptcha iframe').load( function() {
         $('.g-recaptcha iframe').contents().find("head")
          .append($("<style type='text/css'>  .rc-anchor-light { border: none !important;} .rc-anchor { box-shadow: none !important;}  </style>"));
});

This doesn't work too and I believe is the wrong thing to do in this case because the google iframe already does have some custom styles in the <head> style element, so the above I am afraid might override it.

So how exactly do I modify the google captcha styles??

All I want is the border and the shadow gone.

Mr Lister
  • 42,557
  • 14
  • 95
  • 136
Alexander Solonik
  • 8,718
  • 13
  • 56
  • 133

1 Answers1

4

I just ran into the same issue when I included the recaptcha on the bottom of a form, that really did not look right with the default recaptcha border and box shadow. I got around the issue of not being able to style the recaptcha with css or javascript, by creating an absolutely positioned div, the same size as the recaptcha, with a border matching my background color. This way the default border and box-shadow were hidden from the site's users. However, this approach won't work on IE10 and below. I used a conditional comment to insert a stylesheet that hides the new div on those browsers.

HTML:

<div class="recaptcha"><div class="g-recaptcha"></div></div>
<div class="no-border-recaptcha"></div>

CSS: 

.no-border-recaptcha{
  width: 304px //same width as the google recaptcha
  height: 78px //same height as the google recaptcha
  position: absolute;
  right: 0 //I have my recaptcha floated to the bottom right of the form
  pointer-events: none //make it so that you can still select the recaptcha behind the new div
  border: 3px solid #f7f7f7 //matches my background color
}
Hannah314
  • 41
  • 5