как ребята упоминали выше, нет никакого способа банкомат. но все же, если кто-то заинтересован, то, добавив всего две строки, вы можете, по крайней мере, сделать его разумным, если он сломается на любом экране. вы можете назначить другое значение в @media query.

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

надеюсь, это поможет кто-нибудь :-).

к сожалению, мы не можем стиль reCaptcha v2, но можно сделать его лучше, вот код:

Нажмите здесь, чтобы просмотреть

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

добавьте свойство размера данных в элемент Google recaptcha и сделайте его равным "компактному" в случае мобильного устройства.

относятся: google recaptcha docs

Что вы можете сделать, это скрыть элемент управления ReCaptcha за div. Затем сделайте свой стиль на этом div. И установите на нем css "pointer-events: none", чтобы вы могли щелкнуть по div ( щелкните через DIV к базовым элементам).

флажок должен быть в том месте, где пользователь нажимает.

вы можете воссоздать recaptcha, обернуть его в контейнер и только пусть флажок виден. Моя главная проблема заключалась в том, что я не мог взять полную ширину, поэтому теперь она расширяется до ширины контейнера. Единственная проблема-это истечение срока действия, вы можете увидеть щелчок, но как только это произойдет, я сброшу его.

смотрите эту демонстрацию 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>

просто добавив Хак-иш решение, чтобы сделать его отзывчивым.

оберните recaptcha в дополнительный div:

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

добавить стили. Это предполагает темную тему.

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

это дает следующее:

теперь он будет изменять размер по горизонтали, и не имеет границы. Логотип recaptcha будет обрезан справа, поэтому я скрываю его с помощью границы справа. Он также скрывает ссылки на конфиденциальность и условия, так что вы можете добавить их обратно.

Я попытался установить высоту на элемент обертки, а затем вертикально центрировать recaptcha, чтобы уменьшить высоту. К сожалению, любая комбинация переполнения: скрытая и меньшая высота, похоже, убивает iframe.

в версии 2.0 это невозможно. Iframe блокирует все стили из этого. Трудно добавить пользовательскую тему вместо темной или светлой.

с интеграцией невидимого reCAPTCHA вы можете сделать следующее:

чтобы включить невидимую reCAPTCHA, а не помещать параметры в div, вы можете добавить их непосредственно в кнопку html.

a. data-callback="". Это работает так же, как флажок captcha, но требуется для невидимого.

B. data-badge: это позволяет вам переместить значок reCAPTCHA (т. е. логотип и 'protected by reCAPTCHA' text). Допустимые параметры в ‘Нижнем’ (по умолчанию), "bottomleft" или "inline", который будет помещать значок непосредственно над кнопкой. Если вы сделайте значок встроенным, вы можете напрямую управлять CSS значка.

Я использую следующий трюк, чтобы сделать его отзывчивым и удалить границы. эти трюки, возможно, скрывают сообщение/ошибку recaptcha.

этот стиль для rtl lang, но вы можете легко изменить его.

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

большой! Теперь вот стиль доступен для рекапчи.. Я просто использую встроенный стиль, как:

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

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

надеюсь, что это поможет вам!!

поздно на вечеринку, но, может быть, мое решение поможет кому-то.

Я не нашел никакого решения, которое работает на отзывчивом веб-сайте, когда изменяется видовой экран или макет является жидким.

Итак, я создал сценарий jQuery для django-cms, который динамически адаптируется к изменяющемуся видовому экрану. Я собираюсь обновить этот ответ, как только у меня возникнет необходимость в современном варианте, который является более модульным и не имеет 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;

Если кто-то все еще заинтересован, есть простая библиотека javascript (без зависимости jQuery), названная custom recaptcha. Он позволяет настроить кнопку с помощью css и реализовать некоторые события js (ready/checked). Идея состоит в том, чтобы сделать recaptcha по умолчанию "невидимым" и поместить на него кнопку. Просто измените идентификатор recaptcha, и все.

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

см.https://azentreprise.org/read.php?id=1 для получения дополнительной информации.

Я просто добавляю такое решение / быстрое исправление, чтобы оно не потерялось в случае сломанной ссылки.

ссылка на данное решение "хотите добавить ссылку как изменить размер Google noCAPTCHA reCAPTCHA / The Geek Goddess" была предоставлена Викрам Сингх Саини и просто описывает, что вы можете использовать встроенный CSS для принудительного кадрирования 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>

в случае, если кто-то борется с recaptcha контактной формы 7 (wordpress) вот решение работает для меня

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