www style google bootstrap css iframe width recaptcha

css - style - Cambiar el nuevo ancho de Google Recaptcha(v2)



recaptcha v2 (12)

Acabamos de comenzar a implementar el nuevo recaptcha de google como se enumera https://www.google.com/recaptcha/intro/index.html

Sin embargo, el nuevo método parece estar contenido dentro de un iFrame en lugar de estar incrustado en la página, lo que dificulta la aplicación de CSS.

Sin embargo, tenemos nuestro formulario que tiene 400px de ancho, por lo que me gustaría tener el recaptcha del mismo ancho.

Actualmente parece, sin embargo, nos gustaría lo mismo que el resto.

¿Alguien sabe cómo hacer esto todavía?

Gracias

Ahora, puede usar el siguiente código (por google)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>

Este es mi trabajo:

1) Agregue un envoltorio div al recaptcha div.

<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>

2) Agregue código javascript / jquery.

<div class="g-recaptcha" style="transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0;" data-theme="light" data-sitekey="XXXXXXXXXXXXX"></div>

3) Opcional: agregue un poco de estilo si es necesario.

#recaptcha-wrapper { text-align:center; margin-bottom:15px; }

.g-recaptcha { display:inline-block; }

He encontrado las siguientes mejores formas de cambiar el tamaño de recaptchas de google

Opción 1: puede cambiar el tamaño de Google ReCaptcha utilizando el estilo en línea.

Una primera forma de cambiar el tamaño de la recaptura de Google utilizando el estilo en línea. Los estilos en línea son estilos CSS que se aplican a un elemento, directamente en el HTML de la página, utilizando el atributo de estilo. Este es el ejemplo que muestra cómo diseñar Google reCAPTCHA utilizando el estilo en línea.

<style type="text/css"> .g-recaptcha{ transform:scale(0.77); -webkit-transform:scale(0.77); transform-origin:0 0; -webkit-transform-origin:0 0; } </style>

Opción 2: colocando el siguiente estilo en su página (Hoja de estilo interna).

En segundo lugar, puede poner estilo para ReCaptcha en la página entre y. Una hoja de estilo interna es una sección en una página HTML que contiene definiciones de estilo. Las hojas de estilo internas se definen mediante el uso de la etiqueta dentro del área del documento. Este es el ejemplo que muestra cómo diseñar Google reCAPTCHA utilizando una hoja de estilo externa.

<style type="text/css"> .g-recaptcha{ transform:scale(0.77); -webkit-transform:scale(0.77); transform-origin:0 0; -webkit-transform-origin:0 0; } </style>

Opción 3: cambie el tamaño de Google ReCaptcha utilizando una hoja de estilo externa.

Cree un archivo separado y dé un nombre como style.css y agregue este enlace de archivo entre su elemento en su página. Por ej. .

$(function(){ // global variables captchaResized = false; captchaWidth = 304; captchaHeight = 78; captchaWrapper = $(''#recaptcha-wrapper''); captchaElements = $(''#rc-imageselect, .g-recaptcha''); resizeCaptcha(); $(window).on(''resize'', function() { resizeCaptcha(); }); }); function resizeCaptcha() { if (captchaWrapper.width() >= captchaWidth) { if (captchaResized) { captchaElements.css(''transform'', '''').css(''-webkit-transform'', '''').css(''-ms-transform'', '''').css(''-o-transform'', '''').css(''transform-origin'', '''').css(''-webkit-transform-origin'', '''').css(''-ms-transform-origin'', '''').css(''-o-transform-origin'', ''''); captchaWrapper.height(captchaHeight); captchaResized = false; } } else { var scale = (1 - (captchaWidth - captchaWrapper.width()) * (0.05/15)); captchaElements.css(''transform'', ''scale(''+scale+'')'').css(''-webkit-transform'', ''scale(''+scale+'')'').css(''-ms-transform'', ''scale(''+scale+'')'').css(''-o-transform'', ''scale(''+scale+'')'').css(''transform-origin'', ''0 0'').css(''-webkit-transform-origin'', ''0 0'').css(''-ms-transform-origin'', ''0 0'').css(''-o-transform-origin'', ''0 0''); captchaWrapper.height(captchaHeight * scale); if (captchaResized == false) captchaResized = true; } }

No, actualmente no puedes. Solo fue posible con la antigua recaptcha, pero estoy seguro de que podrá hacerlo en el futuro.

No tengo solución sino una sugerencia. Tuve el mismo problema, así que centré el div recaptcha ( margin: 0 auto;display: table ), creo que se ve mucho mejor que un div alineado a la izquierda.

Para la nueva versión de noCaptcha Recaptcha, lo siguiente funciona para mí:

<div class="g-recaptcha" data-sitekey="6LcVkQsTAAAAALqSUcqN1zvzOE8sZkOq2GMBE-RK" style="transform:scale(0.7);transform-origin:0;-webkit-transform:scale(0.7); transform:scale(0.7);-webkit-transform-origin:0 0;transform-origin:0 0;"></div>

https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

Para más compatibilidad:

-webkit-transform: scale(0.77); -moz-transform: scale(0.77); -ms-transform: scale(0.77); -o-transform: scale(0.77); transform: scale(0.77); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;

Puede usar el parámetro de reCaptcha. De manera predeterminada, utiliza normal valor normal en data-size , solo tiene que usar compact para ajustar esto en dispositivos pequeños o diseños de ancho pequeño de algún tipo.

ejemplo:

<div class="g-recaptcha" data-size="compact"></div>

Tengo esta función en el evento de documento listo para que reCaptcha tenga un tamaño dinámico. Cualquiera debería poder dejar esto en su lugar e irse.

function ScaleReCaptcha() { if (document.getElementsByClassName(''g-recaptcha'').length > 0) {parentWidth = document.getElementsByClassName(''g-recaptcha'') [0].parentNode.clientWidth; childWidth = document.getElementsByClassName(''g-recaptcha'')[0].firstChild.clientWidth; scale = (parentWidth) / (childWidth); new_width = childWidth * scale; document.getElementsByClassName(''g-recaptcha'')[0].style.transform = ''scale('' + scale + '')''; document.getElementsByClassName(''g-recaptcha'')[0].style.transformOrigin = ''0 0''; } }

Un poco tarde pero tengo una solución fácil:

Simplemente agregue este código a su clase "g-recaptcha":

width: desired_width; border-radius: 4px; border-right: 1px solid #d8d8d8; overflow: hidden;

Ya ha llegado tarde, pero solo quiero ayudar a otros si aún enfrenta un problema. Encontré una buena solución JS aquí: https://github.com/google/recaptcha/issues/61#issuecomment-376484690

Aquí está el código JavaScript usando jQuery para hacerlo:

$(document).ready(function () { var width = $(''.g-recaptcha'').parent().width(); if (width < 302) { var scale = width / 302; $(''.g-recaptcha'').css(''transform'', ''scale('' + scale + '')''); $(''.g-recaptcha'').css(''-webkit-transform'', ''scale('' + scale + '')''); $(''.g-recaptcha'').css(''transform-origin'', ''0 0''); $(''.g-recaptcha'').css(''-webkit-transform-origin'', ''0 0''); } });

Nota de IMP: también admitirá todos los dispositivos, arriba y debajo de 320px de ancho.

.g-recaptcha{ -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); -moz-transform-origin:0; -ms-transform-origin:0; -o-transform-origin:0; -webkit-transform:scale(1.1); transform:scale(1.1); -webkit-transform-origin:0 0; transform-origin:0; filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1,M12=0,M21=0,M22=1.1,SizingMethod=''auto expand''); }