No he tenido mucho éxito encontrando cómo diseñar el nuevo recaptcha de Google (v2). El objetivo final es hacerlo receptivo, pero tengo dificultades para aplicar el estilo incluso para cosas simples como el ancho.

Su documentación de API no parece dar ningún detalle sobre cómo controlar el estilo en ningún otro aspecto que no sea el parámetro del tema , y las soluciones simples de CSS y JavaScript no me han funcionado.

Básicamente, necesito poder aplicar CSS a la nueva versión de reCaptcha de Google. Usar JavaScript con él es aceptable.

Visión general:

Lamento ser el que responde a las malas noticias, pero después de investigar y depurar, está bastante claro que no hay forma de personalizar el estilo de los nuevos controles reCAPTCHA. Los controles están envueltos en un iframe, lo que evita el uso de CSS para diseñarlos, y la Política del mismo origen evita que JavaScript acceda a los contenidos, descartando incluso una solución pirata.

¿Por qué no personalizar la API ?:

A diferencia de reCAPTCHA API Versión 1.0 , no hay opciones de personalización en API Versión 2.0 . Si consideramos cómo funciona esta nueva API, no es de extrañar por qué.

Extracto de ¿Eres un robot? Presentamos "Sin CAPTCHA reCAPTCHA" :

Si bien la nueva API de reCAPTCHA puede parecer simple, hay un alto grado de sofisticación detrás de esa modesta casilla de verificación. Los CAPTCHA se han basado durante mucho tiempo en la incapacidad de los robots para resolver texto distorsionado. Sin embargo, nuestra investigación demostró recientemente que la tecnología de inteligencia artificial actual puede resolver incluso la variante más difícil de texto distorsionado con una precisión del 99,8%. Por lo tanto, el texto distorsionado, por sí solo, ya no es una prueba confiable.

Para contrarrestar esto, el año pasado desarrollamos un backend de análisis de riesgo avanzado para reCAPTCHA que considera activamente el compromiso total de un usuario con el CAPTCHA — antes, durante y después — para determinar si ese usuario es un humano. Esto nos permite confiar menos en escribir texto distorsionado y, a su vez, ofrecer una mejor experiencia a los usuarios. Hablamos de esto en nuestra publicación del Día de San Valentín a principios de este año.

Si pudieras manipular directamente el estilo de los elementos de control, podrías interferir fácilmente con la lógica de creación de perfiles de usuario que hace posible el nuevo reCAPTCHA.

¿Qué pasa con un tema personalizado ?:

Ahora, la nueva API ofrece una themeopción , mediante la cual puede elegir un tema preestablecido como lighty dark. Sin embargo, actualmente no existe una forma de crear un tema personalizado. Si inspeccionamos el iframe, encontraremos que el themenombre se pasa en la cadena de consulta del srcatributo. Esta URL se parece a la siguiente.

https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...

Este parámetro determina qué nombre de clase CSS se usa en el elemento contenedor en el iframey determina el tema preestablecido a usar.

Cavar a través de la fuente minified, descubrí que en realidad hay 4 valores válidos temáticos, que es más que el 2 que figuran en la documentación, pero defaulty standardson los mismos que light.

Podemos ver el código que selecciona el nombre de la clase de este objeto aquí.

No hay código para un tema personalizado, y si themese especifica cualquier otro valor, usará el standardtema.

En conclusión:

En la actualidad, no hay forma de diseñar completamente los nuevos elementos reCAPTCHA, solo iframese pueden estilizar los elementos de envoltura alrededor . Es casi seguro que esto se hizo intencionalmente, para evitar que los usuarios rompan la lógica de creación de perfiles de usuario que hace posible la nueva casilla de verificación sin captcha. Es posible que Google pueda implementar una API de tema personalizado limitada, quizás permitiéndole elegir colores personalizados para elementos existentes, pero no esperaría que Google implemente un estilo CSS completo.

Como los chicos mencionaron anteriormente, no hay forma de cajero automático. pero aún así, si alguien está interesado, al agregar solo dos líneas, al menos puede hacer que parezca razonable, si se rompe en cualquier pantalla. puede asignar un valor diferente en la consulta @media.

<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>

Espero que esto ayude a alguien :-).

Desafortunadamente, no podemos diseñar reCaptcha v2, pero es posible hacer que se vea mejor, aquí está el código:

Haga clic aquí para obtener una vista previa

.g-recaptcha-outer{
    text-align: center;
    border-radius: 2px;
    background: #f9f9f9;
    border-style: solid;
    border-color: #37474f;
    border-width: 1px;
    border-bottom-width: 2px;
}
.g-recaptcha-inner{
    width: 154px;
    height: 82px;
    overflow: hidden;
    margin: 0 auto;
}
.g-recaptcha{
    position:relative;
    left: -2px;
    top: -1px;
}

<div class="g-recaptcha-outer">
    <div class="g-recaptcha-inner">
        <div class="g-recaptcha" data-size="compact" data-sitekey="YOUR KEY"></div>
    </div>
</div>

Agregue una propiedad de tamaño de datos al elemento recaptcha de google y hágalo igual a "compacto" en el caso de dispositivos móviles.

Consulte: google recaptcha docs

Utilizo el siguiente truco para que responda y elimine los bordes. Estos trucos pueden ocultar el mensaje / error de recaptcha.

Este estilo es para rtl lang, pero puede cambiarlo fácilmente.

.g-recaptcha {
    position: relative;
    width: 100%;
    background: #f9f9f9;
    overflow: hidden;
}

.g-recaptcha > * {
    float: right;
    right: 0;
    margin: -2px -2px -10px;/*remove borders*/ 
}

.g-recaptcha::after{
    display: block;
    content: "";
    position: absolute;
    left:0;
    right:150px;
    top: 0;
    bottom:0;
    background-color: #f9f9f9;
    clear: both;
}

<div class="g-recaptcha" data-sitekey="Your Api Key"></div>
<script src='https://www.google.com/recaptcha/api.js?hl=fa'></script>

Lo que puede hacer es ocultar el Control ReCaptcha detrás de un div. Luego haz tu estilo en este div. Y establezca el CSS "pointer-events: none" en él, para que pueda hacer clic en el div ( Haga clic en un DIV para los elementos subyacentes ).

La casilla de verificación debe estar en un lugar donde el usuario haga clic.

Puede recrear recaptcha, envolverlo en un contenedor y dejar solo la casilla de verificación visible. Mi principal problema era que no podía tomar el ancho completo, por lo que ahora se expande al ancho del contenedor. El único problema es la caducidad, puedes ver una película, pero tan pronto como sucede, la restablezco.

Vea esta demostración http://codepen.io/alejandrolechuga/pen/YpmOJX

function recaptchaReady () {
  grecaptcha.render('myrecaptcha', {
  'sitekey': '6Lc7JBAUAAAAANrF3CJaIjt7T9IEFSmd85Qpc4gj',
  'expired-callback': function () {
    grecaptcha.reset();
    console.log('recatpcha');
  }
});
}

.recaptcha-wrapper {
    height: 70px;
  overflow: hidden;
  background-color: #F9F9F9;
  border-radius: 3px;
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  height: 70px;
  position: relative;
  margin-top: 17px;
  border: 1px solid #d3d3d3;
  color: #000;
}

.recaptcha-info {
  background-size: 32px;
  height: 32px;
  margin: 0 13px 0 13px;
  position: absolute;
  right: 8px;
  top: 9px;
  width: 32px;
  background-image: url(https://www.gstatic.com/recaptcha/api2/logo_48.png);
  background-repeat: no-repeat;
}
.rc-anchor-logo-text {
  color: #9b9b9b;
  cursor: default;
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  margin-top: 5px;
  text-align: center;
  position: absolute;
  right: 10px;
  top: 37px;
}
.rc-anchor-checkbox-label {
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  left: 50px;
  top: 26px;
  position: absolute;
  color: black;
}
.rc-anchor .rc-anchor-normal .rc-anchor-light {
  border: none;
}
.rc-anchor-pt {
  color: #9b9b9b;
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 8px;
  font-weight: 400;
  right: 10px;
  top: 53px;
  position: absolute;
  a:link {
    color: #9b9b9b;
    text-decoration: none;
  }
}

g-recaptcha {
  // transform:scale(0.95);
  // -webkit-transform:scale(0.95);
  // transform-origin:0 0;
  // -webkit-transform-origin:0 0;

}

.g-recaptcha {
  width: 41px;

  /* border: 1px solid red; */
  height: 38px;
  overflow: hidden;
  float: left;
  margin-top: 16px;
  margin-left: 6px;
  
    > div {
    width: 46px;
    height: 30px;
    background-color:  #F9F9F9;
    overflow: hidden;
    border: 1px solid red;
    transform: translate3d(-8px, -19px, 0px);
  }
  div {
    border: 0;
  }
}

<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReady&&render=explicit'></script>

<div class="recaptcha-wrapper">
  <div id="myrecaptcha" class="g-recaptcha"></div>
          <div class="rc-anchor-checkbox-label">I'm not a Robot.</div>
        <div class="recaptcha-info"></div>
        <div class="rc-anchor-logo-text">reCAPTCHA</div>
        <div class="rc-anchor-pt">
          <a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a>
          <span aria-hidden="true" role="presentation"> - </span>
          <a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a>
        </div>
</div>

¡Excelente! Ahora aquí hay un estilo disponible para reCaptcha .. Solo uso un estilo en línea como:

<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div> 

cualquier cosa que quieras hacer pequeña personalización en estilo en línea ...

¡¡Espero que te ayude!!

Simplemente agregando una solución hack-ish para que responda.

Envuelva el recaptcha en un div extra:

<div class="recaptcha-wrap">                   
    <div id="g-recaptcha"></div>
</div>

Agrega estilos. Esto asume el tema oscuro.

// Recaptcha
.recaptcha-wrap {
    position: relative;
    height: 76px;
    padding:1px 0 0 1px;
    background:#222;
    > div {
        position: absolute;
        bottom: 2px;
        right:2px;
        font-size:10px;
        color:#ccc;
    }
}

// Hides top border
.recaptcha-wrap:after {
    content:'';
    display: block;
    background-color: #222;
    height: 2px;
    width: 100%;
    top: -1px;
    left: 0px;
    position: absolute;
}

// Hides left border
.recaptcha-wrap:before {
    content:'';
    display: block;
    background-color: #222;
    height: 100%;
    width: 2px;
    top: 0;
    left: -1px;
    position: absolute;
    z-index: 1;
}

// Makes it responsive & hides cut-off elements
#g-recaptcha {
    overflow: hidden;
    height: 76px;
    border-right: 60px solid #222222;
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222;
    position: relative;
    box-sizing: border-box;
    max-width: 294px;
}

Esto produce lo siguiente:

Ahora cambiará de tamaño horizontalmente y no tendrá borde. El logotipo de recaptcha se cortaría a la derecha, así que lo estoy ocultando con un borde derecho. También oculta los enlaces de privacidad y términos, por lo que es posible que desee volver a agregarlos.

Intenté establecer una altura en el elemento de envoltura y luego centrar verticalmente el recaptcha para reducir la altura. Desafortunadamente, cualquier combinación de overflow: hidden y una altura menor parece matar al iframe.

en la V2.0 no es posible. El iframe bloquea todos los estilos de esto. Es difícil agregar un tema personalizado en lugar de uno oscuro o claro.

Con la integración del reCAPTCHA invisible puede hacer lo siguiente:

Para habilitar el reCAPTCHA invisible, en lugar de poner los parámetros en un div, puede agregarlos directamente a un botón html.

a. data-callback = ””. Esto funciona como el captcha de casilla de verificación, pero es necesario para invisible.

si. insignia de datos: Esto le permite reposicionar la insignia reCAPTCHA (es decir, el logotipo y el texto 'protegido por reCAPTCHA'). Opciones válidas como 'abajo a la derecha' (el valor predeterminado), 'abajo a la izquierda' o 'en línea' que colocarán la insignia directamente sobre el botón. Si crea la insignia en línea, puede controlar el CSS de la insignia directamente.

En caso de que alguien tenga problemas con la recaptcha del formulario de contacto 7 (wordpress), aquí hay una solución que me funciona

.wpcf7-recaptcha{
clear: both;
float: left;
}
.wpcf7-recaptcha{
margin-right: 6px;
width: 206px;
height: 65px;
overflow: hidden;
border-right: 1px solid #D3D3D3;
}
.wpcf7-recaptcha iframe{
padding-bottom: 15px;
border-bottom: 1px solid #D3D3D3;
background: #F9F9F9;
border-left: 1px solid #d3d3d3;
}

Tarde para la fiesta, pero tal vez mi solución ayude a alguien.

No he encontrado ninguna solución que funcione en un sitio web receptivo cuando la ventana gráfica cambia o el diseño es fluido.

Así que he creado un script jQuery para django-cms que se adapta dinámicamente a una ventana gráfica cambiante. Voy a actualizar esta respuesta tan pronto como tenga la necesidad de una variante moderna que sea más modular y no tenga dependencia de jQuery.

html

<div class="g-recaptcha" data-sitekey="{site_key}" data-size={size}> 
</div> 

css

.g-recaptcha { display: none; }

.g-recaptcha.g-recaptcha-initted { 
    display: block; 
    overflow: hidden; 
}

.g-recaptcha.g-recaptcha-initted > * {
    transform-origin: top left;
}

js

window.djangoReCaptcha = {
    list: [],
    setup: function() {
        $('.g-recaptcha').each(function() {
            var $container = $(this);
            var config = $container.data();

            djangoReCaptcha.init($container, config);
        });

        $(window).on('resize orientationchange', function() {
            $(djangoReCaptcha.list).each(function(idx, el) {
                djangoReCaptcha.resize.apply(null, el);
            });
        });
    },
    resize: function($container, captchaSize) {
        scaleFactor = ($container.width() / captchaSize.w);
        $container.find('> *').css({
            transform: 'scale(' + scaleFactor + ')',
            height: (captchaSize.h * scaleFactor) + 'px'
        });
    },
    init: function($container, config) {
        grecaptcha.render($container.get(0), config);

        var captchaSize, scaleFactor;
        var $iframe = $container.find('iframe').eq(0);

        $iframe.on('load', function() {
            $container.addClass('g-recaptcha-initted');
            captchaSize = captchaSize || { w: $iframe.width() - 2, h: $iframe.height() };
            djangoReCaptcha.resize($container, captchaSize);
            djangoReCaptcha.list.push([$container, captchaSize]);
        });
    },
    lateInit: function(config) {
        var $container = $('.g-recaptcha.g-recaptcha-late').eq(0).removeClass('.g-recaptcha-late');
        djangoReCaptcha.init($container, config);
    }
};

window.djangoReCaptchaSetup = window.djangoReCaptcha.setup;

Si alguien todavía está interesado, hay una biblioteca de JavaScript simple (sin dependencia de jQuery), llamada recaptcha personalizada. Le permite personalizar el botón con css e implementar algunos eventos js (listo / verificado). La idea es hacer que la recaptcha predeterminada sea "invisible" y poner un botón sobre ella. Simplemente cambie la identificación del recaptcha y eso es todo.

<head>
    <script src="https://azentreprise.org/download/custom-recaptcha.min.js"></script>
    <style type="text/css">
        #captcha {
            float: left;
            margin: 2%;

            background-color: rgba(72, 61, 139, 0.5); /* darkslateblue with 50% opacity */
            border-radius: 2px;

            font-size: 1em;
            color: #C0FFEE;
        }

        #captcha.success {
            background-color: rgba(50, 205, 50, 0.5); /* limegreen with 50% opacity */
            color: limegreen;
        }
    </style>
</head>
<body>
    <div id="captcha" data-sitekey="your_site_key" data-label="Click here" data-label-spacing="15"></div>
</body>

Consulte https://azentreprise.org/read.php?id=1 para obtener más información.

Solo estoy agregando este tipo de solución / arreglo rápido para que no se pierda en caso de que se rompa un enlace.

Vikram Singh Saini  proporcionó un enlace a esta solución "¿Desea agregar un enlace? Cómo cambiar el tamaño de Google noCAPTCHA reCAPTCHA | The Geek Goddess" y simplemente describe que puede usar CSS en línea para hacer cumplir el marco del iframe.

// Scale the frame using inline CSS
 <div class="g-recaptcha" data-theme="light" 
 data-sitekey="XXXXXXXXXXXXX" 

 style="transform:scale(0.77);
 -webkit-transform:scale(0.77);
 transform-origin:0 0;
  -webkit-transform-origin:0 0;

 ">
</div> 

// Scale the images using a stylesheet
<style>
#rc-imageselect, .g-recaptcha {
  transform:scale(0.77);
  -webkit-transform:scale(0.77);
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
}
</style>

También puede elegir entre un tema ReCaptcha claro o oscuro . Usé esto en una de mis aplicaciones de Angular 8

Me encontré con esta respuesta tratando de diseñar el ReCaptcha v2 para un sitio que tiene un modo claro y otro oscuro. Jugué un poco más y descubrí que transform, además , filtertambién se aplica a iframeelementos, por lo que terminé usando el ReCaptcha claro / predeterminado y haciendo esto cuando el usuario está en modo oscuro:

.g-recaptcha {
    filter: invert(1) hue-rotate(180deg);
}

Esto hue-rotate(180deg)hace que el logotipo siga siendo azul y la marca de verificación siga siendo verde cuando el usuario haga clic en él, mientras que el blanco se convierte invert()en negro y viceversa.

No vi esto en ninguna respuesta o comentario, así que decidí compartirlo incluso si se trata de un hilo antiguo.

Puede usar algo de CSS para el estilo de Google reCAPTCHA v2 en su sitio web:

- Cambiar el fondo, el color del widget Google reCAPTCHA v2:

.rc-anchor-light { 
background: #fff!important; 
color: #fff!important; }

o

.rc-anchor-normal{
background: #000 !important; 
color: #000 !important; }

- Cambie el tamaño del widget reCAPTCHA v2 de Google usando este fragmento:

.rc-anchor-light { 
transform:scale(0.9); 
-webkit-transform:scale(0.9); }

- Responde tu Google reCAPTCHA v2:

@media only screen and (min-width: 768px) {
.rc-anchor-light { 
transform:scale(0.85); 
-webkit-transform:scale(0.85); } 
}

Todos los elementos, propiedad de CSS anterior, son solo para su referencia. Puede cambiarlos usted mismo (solo usando el selector de clases CSS).

Consulte en el blog de OIW: cómo editar CSS de Google reCAPTCHA (Re-estilo, cambio de posición, cambio de tamaño de insignia reCAPTCHA)

También puede encontrar el estilo de Google reCAPTCHA v3 allí.