Как стилизовать reCaptcha?

Question

[skdon]

День добрый!
Подскажите, пожалуйста, как можно стилизовать reCaptcha под свой сайт. Допустим reCaptcha вызывается во всплывающем окне и окно уже чем блок каптчи. Получается не краcиво

Можно ли как то стилизовать ее под свое окно.
Как вариант в десктоп версии можно уыеличить форму. Но в мобильной версии все равно получается не красиво.
Сам код подгружается через iframe и изменить его стиль соответственно не получается.

Answer 1

[andreibalkin]

Можно изменить масштаб средствами css, прописав их для блока капчи. Стандартно вроде блок с классом - g-recaptcha.

transform:scale(0.8);
-webkit-transform:scale(0.8);
transform-origin:0 0;
-webkit-transform-origin:0 0;

Так же как и в мобильной версии сделать другой масштаб к примеру используя медиа запросы -@media screen and (max-height: 480px){}

Comments

[skdon]

В том то и дело, что код он подгружает через iframe. А у iframe css изменить нельзя. Во всяком случае у меня не получается.

[andreibalkin]

Почитай тут комменты - думаю найдешь решение для себя https://geekgoddess.com/how-to-resize-the-google-n...

[skdon]

Спасибо. Уже лучше. Но все равно немного не так как хотелось бы. У меня ширина всплывающего блока изменяется динамически. А вот трансформация фиксированная и получается что блок не подгоняется под размер окна, а можно задать только фиксированный размер.

[andreibalkin]

Ну есть такое дело ) Сам как бы сталкивался когда то. Не знаю почему гугл после подобных плясок с бубном вокруг предыдущей версии рекапчи в новой не сделал возможность задать размеры блока хотя бы. Не говоря уже кастомизации дизайна

Answer 2

[cubania]

Лечится это очень простым JS кодом с библиотекой jQuery.

$(function() { 
    var reCaptchaWidth = 302;
    var containerWidth = $('.container').width(); 
    if(reCaptchaWidth > containerWidth) {
        var reCaptchaScale = containerWidth / reCaptchaWidth;
        $('.g-recaptcha').css({
            'transform':'scale('+reCaptchaScale+')',
            'transform-origin':'left top'
        });
    }                
});

Остается только поместить саму капчу в блок с классом container

Работает все очень просто: определяется ширина блока, в котором расположена капча, и если она ее меньше, то происходит масштабирование.