Não tive muito sucesso em descobrir como estilizar o novo recaptcha do Google (v2). O objetivo final é torná-lo responsivo, mas estou tendo dificuldade em aplicar estilos até mesmo para coisas simples como largura.

A documentação da API deles não parece fornecer detalhes sobre como controlar o estilo, exceto o parâmetro do tema , e soluções simples de CSS e JavaScript não funcionaram para mim.

Basicamente, preciso ser capaz de aplicar CSS à nova versão do reCaptcha do Google. Usar JavaScript com ele é aceitável.

Visão geral:

Desculpe responder a más notícias, mas depois de pesquisar e depurar, fica bem claro que não há como personalizar o estilo dos novos controles do reCAPTCHA. Os controles são envolvidos em um iframe, o que impede o uso de CSS para estilizá-los, e a política de mesma origem impede que o JavaScript acesse o conteúdo, descartando até mesmo uma solução hacky.

Por que não personalizar API ?:

Ao contrário do reCAPTCHA API Versão 1.0 , não há opções de personalização na API Versão 2.0 . Se considerarmos como essa nova API funciona, não é nenhuma surpresa por quê.

Trecho de Você é um robô? Apresentando “No CAPTCHA reCAPTCHA” :

Embora a nova API reCAPTCHA possa parecer simples, há um alto grau de sofisticação por trás dessa modesta caixa de seleção. CAPTCHAs há muito confiam na incapacidade dos robôs de resolver textos distorcidos. No entanto, nossa pesquisa mostrou recentemente que a tecnologia de Inteligência Artificial de hoje pode resolver até mesmo a variante mais difícil de texto distorcido com precisão de 99,8%. Assim, o texto distorcido, por si só, não é mais um teste confiável.

Para contrariar isso, no ano passado desenvolvemos um back-end de Análise de Risco Avançada para reCAPTCHA que considera ativamente todo o envolvimento do usuário com o CAPTCHA - antes, durante e depois - para determinar se esse usuário é humano. Isso nos permite confiar menos na digitação de texto distorcido e, por sua vez, oferece uma experiência melhor para os usuários. Falamos sobre isso em nossa postagem do Dia dos Namorados no início deste ano.

Se você pudesse manipular diretamente o estilo dos elementos de controle, poderia facilmente interferir na lógica de criação de perfil do usuário que torna o novo reCAPTCHA possível.

E um tema personalizado ?:

Agora, a nova API oferece uma themeopção , pela qual você pode escolher um tema predefinido como lighte dark. No entanto, atualmente não há uma maneira de criar um tema personalizado. Se inspecionarmos o iframe, descobriremos que o themenome é passado na string de consulta do srcatributo. Este URL se parece com o seguinte.

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

Este parâmetro determina qual nome de classe CSS é usado no elemento wrapper no iframee determina o tema predefinido a ser usado.

Explorando a fonte minimizada, descobri que existem na verdade 4 valores de tema válidos, que são mais do que os 2 listados na documentação, mas defaulte standardsão os mesmos que light.

Podemos ver o código que seleciona o nome da classe deste objeto aqui.

Não há código para um tema personalizado e, se qualquer outro themevalor for especificado, ele usará o standardtema.

Em conclusão:

No momento, não há como estilizar totalmente os novos elementos reCAPTCHA, apenas os elementos de invólucro ao redor do iframepodem ser estilizados. Isso quase certamente foi feito intencionalmente, para evitar que os usuários quebrassem a lógica de criação de perfil do usuário que torna possível a nova caixa de seleção livre de captcha. É possível que o Google possa implementar uma API de tema personalizado limitada, talvez permitindo que você escolha cores personalizadas para os elementos existentes, mas não espero que o Google implemente um estilo CSS completo.

Como vocês mencionaram acima, não existe caixa eletrônico. mas, ainda assim, se houver alguém interessado, ao adicionar apenas duas linhas você pode pelo menos fazer com que pareça razoável, se quebrar em qualquer tela. você pode atribuir valores diferentes na consulta @media.

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

Espero que isso ajude alguém :-).

Infelizmente não podemos estilizar o reCaptcha v2, mas é possível fazer com que pareça melhor, aqui está o código:

Clique aqui para visualizar

.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>

Adicione uma propriedade data-size ao elemento google recaptcha e torne-o igual a "compacto" no caso de celular.

Consulte: google recaptcha docs

Eu uso o truque abaixo para torná-lo responsivo e remover bordas. esses truques podem esconder mensagem / erro de recaptcha.

Este estilo é para rtl lang, mas você pode alterá-lo facilmente.

.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>

O que você pode fazer é ocultar o controle ReCaptcha atrás de um div. Então faça seu estilo neste div. E defina o css "ponteiro-eventos: nenhum" nele, para que você possa clicar no div ( Clique em um DIV para os elementos subjacentes ).

A caixa de seleção deve estar em um local onde o usuário está clicando.

Você pode recriar o recaptcha, embrulhá-lo em um recipiente e apenas deixar a caixa de seleção visível. Meu principal problema era que eu não conseguia pegar a largura total, então agora ela se expande para a largura do contêiner. O único problema é a expiração, você pode ver um movimento, mas assim que acontece eu zero.

Veja esta demonstração 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>

Ótimo! Agora, aqui está o estilo disponível para reCaptcha .. Eu apenas uso o estilo embutido como:

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

tudo o que você deseja fazer pequenas personalizações em estilo embutido ...

Espero que ajude você !!

Basta adicionar uma solução hack-ish para torná-la responsiva.

Envolva a recaptcha em um div extra:

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

Adicione estilos. Isso assume o tema escuro.

// 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;
}

Isso resulta no seguinte:

Agora ele será redimensionado horizontalmente e não tem uma borda. O logotipo da recaptcha seria cortado à direita, então estou escondendo com uma borda à direita. Ele também está ocultando os links de privacidade e termos, então você pode querer adicioná-los novamente.

Tentei definir uma altura no elemento de invólucro e, em seguida, centralizar verticalmente o recaptcha para reduzir a altura. Infelizmente, qualquer combinação de estouro: oculto e uma altura menor parece matar o iframe.

na V2.0 não é possível. O iframe bloqueia todo o estilo disso. É difícil adicionar um tema personalizado em vez de escuro ou claro.

Com a integração do reCAPTCHA invisível, você pode fazer o seguinte:

Para ativar o reCAPTCHA invisível, em vez de colocar os parâmetros em um div, você pode adicioná-los diretamente a um botão html.

uma. data-callback = ””. Isso funciona exatamente como a caixa de seleção captcha, mas é necessário para invisível.

b. crachá de dados: permite reposicionar o crachá reCAPTCHA (ou seja, logotipo e texto 'protegido por reCAPTCHA'). Opções válidas como 'bottomright' (o padrão), 'bottomleft' ou 'inline' que colocarão o emblema diretamente acima do botão. Se você deixar o emblema embutido, poderá controlar o CSS do emblema diretamente.

No caso de alguém ter dificuldades com o recaptcha do formulário de contato 7 (wordpress) aqui está uma solução funcionando para mim

.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;
}

Atrasado para a festa, mas talvez minha solução ajude alguém.

Não encontrei nenhuma solução que funcione em um site responsivo quando a janela de visualização muda ou o layout é fluido.

Portanto, criei um script jQuery para django-cms que se adapta dinamicamente a uma janela de visualização em mudança. Vou atualizar esta resposta assim que tiver a necessidade de uma variante moderna dela que seja mais modular e não tenha dependência 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;

Se alguém ainda estiver interessado, existe uma biblioteca javascript simples (sem dependência jQuery), chamada recaptcha personalizada. Ele permite que você personalize o botão com css e implemente alguns eventos js (prontos / marcados). A ideia é tornar o recaptcha padrão "invisível" e colocar um botão sobre ele. Basta alterar o id do recaptcha e pronto.

<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 obter mais informações.

Estou apenas adicionando este tipo de solução / correção rápida para que não se perca no caso de um link quebrado.

Link para esta solução "Deseja adicionar um link Como redimensionar o Google noCAPTCHA reCAPTCHA | A Deusa Geek"  foi fornecido por Vikram Singh Saini e simplesmente descreve que você pode usar CSS embutido para reforçar o enquadramento do 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>

Você também pode escolher entre um tema ReCaptcha escuro ou claro . Eu usei isso em um dos meus 8 aplicativos Angular

Me deparei com esta resposta tentando estilizar o ReCaptcha v2 para um site que tem um modo claro e escuro. Brinquei mais um pouco e descobri que transform, além disso , filtertambém é aplicado aos iframeelementos então acabamos usando o ReCaptcha padrão / claro e fazendo isso quando o usuário está no modo escuro:

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

O hue-rotate(180deg)faz com que o logotipo ainda é azul ea marca de seleção ainda é verde quando o usuário clica nele, mantendo branco invert()ed' a preto e vice-versa.

Não vi isso em nenhuma resposta ou comentário, então decidi compartilhar, mesmo que seja um tópico antigo.

Você pode usar CSS para o estilo do Google reCAPTCHA v2 em seu site:

- Alterar plano de fundo e cor do widget Google reCAPTCHA v2:

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

ou

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

- Redimensione o widget Google reCAPTCHA v2 usando este snippet:

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

- Responsivo seu Google reCAPTCHA v2:

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

Todos os elementos, propriedade do CSS acima, é apenas para sua referência. Você pode alterá-los por conta própria (apenas usando o seletor de classe CSS).

Consulte o blog OIW - Como editar CSS do Google reCAPTCHA ( redefinir o estilo, alterar posição, redimensionar selo reCAPTCHA)

Você também pode encontrar o estilo do Google reCAPTCHA v3 lá.