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

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

python 3.5 - Pyqtgraph string in x tick -