Переопределение google recaptcha css, чтобы сделать его отзывчивым

Ответ 1

Изменена автоматическая высота и мультимедийный запрос

@media only screen and (max-width : 480px) {
    #recaptcha_challenge_image{
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    #recaptcha_response_field
    {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable #recaptcha_image {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable .recaptcha_r1_c1, 
    .recaptchatable .recaptcha_r3_c1, 
    .recaptchatable .recaptcha_r3_c2, 
    .recaptchatable .recaptcha_r7_c1, 
    .recaptchatable .recaptcha_r8_c1, 
    .recaptchatable .recaptcha_r3_c3, 
    .recaptchatable .recaptcha_r2_c1, 
    .recaptchatable .recaptcha_r4_c1, 
    .recaptchatable .recaptcha_r4_c2, 
    .recaptchatable .recaptcha_r4_c4, 
    .recaptchatable .recaptcha_image_cell {

    margin: 0 !important;
    width: 100% !important;
    background: none !important;
    height: auto !important;
    }

}

Ответ 2

В Google есть полная документация о том, как стилить формы recaptcha:

https://developers.google.com/recaptcha/docs/display

и вы можете полностью переопределить html/css, которые они предоставляют своим собственным.

Ответ 3

Вы можете добавить стиль CSS, но мы решили удалить все, что не было необходимо.

Добавьте этот код в свой файл css:

@media (min-width: 320px) and (max-width: 480px) {
        #recaptcha_challenge_image{
        margin: 0 !important;
        width: 100% !important;
        }
        #recaptcha_response_field
        {
        margin: 0 !important;
        width: 100% !important;
        }
        .recaptchatable #recaptcha_image {
        margin: 0 !important;
        width: 100% !important;
        }
        .recaptchatable .recaptcha_r1_c1, 
        .recaptchatable .recaptcha_r3_c1, 
        .recaptchatable .recaptcha_r3_c2, 
        .recaptchatable .recaptcha_r7_c1, 
        .recaptchatable .recaptcha_r8_c1, 
        .recaptchatable .recaptcha_r3_c3, 
        .recaptchatable .recaptcha_r2_c1, 
        .recaptchatable .recaptcha_r4_c1, 
        .recaptchatable .recaptcha_r4_c2, 
        .recaptchatable .recaptcha_r4_c4, 
        .recaptchatable .recaptcha_image_cell {

        margin: 0 !important;
        width: 100% !important;
        background: none !important;
        }

    }

Ответ 4

Попробуйте это. Google recive reCAPTCHA

Ответ 5

Для reCAPTCHA (реквестеры jQuery):

$(function(){
  function rescaleCaptcha(){
    var width = $('.g-recaptcha').parent().width();
    var scale;
    if (width < 302) {
      scale = width / 302;
    } else{
      scale = 1.0; 
    }

    $('.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');
  }

  rescaleCaptcha();
  $( window ).resize(function() { rescaleCaptcha(); });

});

Это в основном проверяет ширину вашего браузера и зависит от масштаба, в который он должен быть преобразован. Наилучшее решение на данный момент.

Результат снимков экрана (полная ширина, меньшая ширина, наименьшая ширина):

Ответ 6

Лучший способ заключается в том, что вы используете утилиту google recaptcha и используете этот код css, чтобы сделать отзывчивый,

#rc-imageselect, .g-recaptcha {
   display: inline; //the most important
}

#rc-imageselect{
   max-width: 100%;
}

.g-recaptcha>div>div{
   width: 100% !important;
   height: 78px;
   transform:scale(0.77); //the code to rescale the captcha obtained in this page
   webkit-transform:scale(0.77);
   text-align: center;
   position: relative;
}

Ответ 7

Вы можете просто добавить некоторый стиль преобразования для определенного устройства, которое вам нужно:

 @media only screen and (max-width : 767px)     {

 #rc-imageselect, .g-recaptcha {
    transform: scale(0.77);
    -webkit-transform: scale(0.77);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0; }
}

Ответ 8

В моем случае я уменьшил масштаб и наложил горизонтальное выравнивание по центру через систему сетки Bootstrap 4. Нажмите здесь, чтобы увидеть результат.

Код:

<div class="row justify-content-center">
     <div class="col g-recaptcha" data-sitekey="check_reCaptcha_doc_to_set_this" style="width: 304px !important; max-width: 304px !important; -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); margin: 0px; padding: 0px;">
     </div>
</div>

Ответ 9

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

@media only screen and (max-width : 480px) {
  #recaptcha_challenge_image{
    margin: 0 !important;
    width: 100% !important;
  }
  #recaptcha_response_field {
    margin: 0 !important;
    width: 100% !important;
  }
  .recaptchatable #recaptcha_image {
    margin: 0 !important;
    width: 95% !important;
  }
  .recaptchatable .recaptcha_r1_c1,
  .recaptchatable .recaptcha_r3_c1,
  .recaptchatable .recaptcha_r3_c2,
  .recaptchatable .recaptcha_r7_c1,
  .recaptchatable .recaptcha_r8_c1,
  .recaptchatable .recaptcha_r3_c3,
  .recaptchatable .recaptcha_r2_c1,
  .recaptchatable .recaptcha_r4_c1,
  .recaptchatable .recaptcha_r4_c2,
  .recaptchatable .recaptcha_r4_c4,
  .recaptchatable .recaptcha_image_cell {
    margin: 0 !important;
    width: 100% !important;
    background: none !important;
  }
  #recaptcha_table tbody tr td {
    padding: 0 !important;
    width: 75px;
  }
  .recaptchatable .recaptcha_image_cell {
    padding-right: 0 !important;
  }
  #recaptcha_privacy a {
    line-height: 1.2em;
  }
  span#recaptcha_privacy {
    width: 50px;
  }
}

Ответ 10

может быть, это может помочь вам использовать преобразование в вашем главном div, где u call recaptcha

transform: scale(0.75);
transform-origin: left top;

Ответ 11

Вот лучшее обходное решение, которое я нашел в 2017/2018:

.g-recaptcha > div {
    width: 100% !important;
}

.g-recaptcha iframe {
    width: 100% !important;
}

Ответ 12

Это мое решение с медиа-запросами. Я использую масштаб, чтобы уменьшить его до разумного размера для мобильных устройств.

Простое и эффективное решение:

@media (max-width:575px) {
    #rc-imageselect, .g-recaptcha {
        transform:scale(0.77);
        transform-origin:0 0;
        margin-bottom: -20px;
    }
}

Ответ 13

Просто вам нужно скопировать атрибут стиля из кода ниже в ваш код, тогда ваша проблема будет решена.

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

Для более подробной информации откройте эту ссылку