Posterior a de nuestra prolongada búsqueda de información solucionamos este atolladero que tienen ciertos de nuestros lectores. Te regalamos la respuesta y nuestro objetivo es resultarte de gran apoyo.
Solución:
Visión de conjunto:
Perdón por responder 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 iframeque impide el uso de CSS para diseñarlos, y la Política del mismo origen impide que JavaScript acceda a los contenidos, descartando incluso una solución pirateada.
¿Por qué no personalizar la API?:
A diferencia de la versión 1.0 de la API de reCAPTCHA, no hay opciones de personalización en la versión 2.0 de la API. Si consideramos cómo funciona esta nueva API, no sorprende por qué.
Extracto de ¿Eres un robot? Presentamos “No CAPTCHA reCAPTCHA”:
Si bien la nueva API 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 el texto distorsionado. Sin embargo, nuestra investigación mostró 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 riesgos avanzado para reCAPTCHA que considera activamente la participación completa de un usuario con el CAPTCHA, antes, durante y después, para determinar si ese usuario es un ser 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 pudiera manipular directamente el estilo de los elementos de control, podría 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 theme opción, mediante la cual puede elegir un tema preestablecido como light y dark. Sin embargo, actualmente no existe una forma de crear un tema personalizado. Si inspeccionamos el iframeencontraremos el theme el nombre se pasa en la consulta string de El src attribute. 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 iframe y determina el tema predeterminado a usar.
Excavando a través de la fuente minimizada, encontré que en realidad hay 4 valores de tema válidos, que son más que los 2 enumerados en la documentación, pero default y standard son los mismos que light.
Podemos ver el código que selecciona el nombre de clase de este objeto aquí.
No hay código para un tema personalizado, y si cualquier otro theme se especifica el valor, utilizará el standard temática.
En conclusión:
En la actualidad, no hay forma de diseñar completamente los nuevos elementos reCAPTCHA, solo los elementos envolventes alrededor del iframe se puede estilizar. 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 personalizada limitada, lo que quizás le permita elegir colores personalizados para los 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.
Espero que esto ayude a alguien :-).
Agregue una propiedad de tamaño de datos al elemento google recaptcha y hágalo igual a “compacto” en el caso de dispositivos móviles.
Consulte: documentos de google recaptcha
Si guardas algún titubeo o forma de enriquecer nuestro división te recomendamos realizar una aclaración y con gusto lo analizaremos.