html - how to hide the border of a recaptcha v2.0 widget? -
i want hide border of recaptcha v2.0 widget can better visually integrate site's , feel.
note: i'm posting question, , providing solution, because of stackoverflow questions i've found on topic center around removing frameborder attribute of recaptcha's iframe, isn't technically i'm after. i'm after result of -- edgeless recaptcha widget can position within larger visual context.
i hope helpful!
i wanted hide borders of v2.0 recaptcha (the 1 "i'm not robot" checkbox), , solved follows:
wrap recaptcha div (the 1 marked class "g-recaptcha") div, , size bit smaller iframe comes in at, , shift iframe using position: relative , left: -10px, hide borders.
if you're using "compact" version, you'll need adjust sizing... css provide works "normal" version.
note: tested on safari 9.1.2 (osx) only, i'd guess technique translate other browsers too.
hope helps!
html:
<div class="my-div"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div>
css:
.my-div { display: inline-block; overflow: hidden; width: 290px; /* note embedded iframe 302x76 */ height: 74px; text-align: left; } .my-div iframe { position: relative; left: -10px; }
Comments
Post a Comment