У меня не было особого успеха в поиске стиля новой рекапчи Google (v2). Конечная цель - сделать его адаптивным, но мне трудно применить стиль даже для простых вещей, таких как ширина.

Их документация по API , похоже, не дает никаких подробностей о том, как управлять стилем вообще, кроме параметра темы , а простые решения CSS и JavaScript у меня не работали.

По сути, мне нужно применить CSS к новой версии reCaptcha от Google. Допускается использование JavaScript.

Обзор:

Извините, что отвечаю на плохие новости, но после исследования и отладки стало ясно, что нет возможности настроить стиль новых элементов управления reCAPTCHA. Элементы управления обернуты в iframe, что предотвращает использование CSS для их стилизации , а политика Same-Origin предотвращает доступ JavaScript к содержимому, исключая даже хакерское решение.

Почему нет кастомного API ?:

В отличие от reCAPTCHA API версии 1.0 , в API версии 2.0 нет параметров настройки . Если мы посмотрим, как работает этот новый API, неудивительно, почему.

Отрывок из книги " Вы робот?" Представляем «Без CAPTCHA reCAPTCHA» :

Хотя новый API reCAPTCHA может показаться простым, за этим скромным флажком скрывается высокая степень сложности. CAPTCHA долгое время полагались на неспособность роботов решать искаженный текст. Однако наше недавнее исследование показало, что сегодняшняя технология искусственного интеллекта может решить даже самый сложный вариант искаженного текста с точностью 99,8%. Таким образом, искаженный текст сам по себе больше не является надежным тестом.

Чтобы противостоять этому, в прошлом году мы разработали серверную часть расширенного анализа рисков для reCAPTCHA, которая активно учитывает все действия пользователя с CAPTCHA - до, во время и после - чтобы определить, является ли этот пользователь человеком. Это позволяет нам меньше полагаться на набор искаженного текста и, в свою очередь, обеспечивает лучший опыт для пользователей. Мы говорили об этом в нашем посте ко Дню святого Валентина ранее в этом году.

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

А как насчет пользовательской темы ?:

Теперь новый API предлагает themeвариант , с помощью которого вы можете выбрать предустановленную тему, такую ​​как lightи dark. Однако в настоящее время нет способа создать собственную тему. Если мы проверим iframe, мы обнаружим, что themeимя передается в строке запроса srcатрибута. Этот URL-адрес выглядит примерно так.

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

Этот параметр определяет, какое имя класса CSS используется в элементе-оболочке в iframeи определяет используемую предустановленную тему.

Рытье через уменьшенную источник, я обнаружил , что есть на самом деле 4 действительных значений темы, которые больше , чем 2 , перечисленные в документации, но defaultи standardтакое же , как light.

Здесь мы можем увидеть код, который выбирает имя класса из этого объекта.

Для настраиваемой темы нет кода, и если themeуказано любое другое значение, она будет использовать эту standardтему.

В заключение:

В настоящее время нет возможности полностью iframeстилизовать новые элементы reCAPTCHA, можно стилизовать только элементы оболочки вокруг них. Это почти наверняка было сделано намеренно, чтобы пользователи не нарушали логику профилирования пользователей, которая делает возможной установку нового флажка без ввода капчи. Возможно, что Google может реализовать ограниченный API пользовательских тем, возможно, позволяющий выбирать пользовательские цвета для существующих элементов, но я не ожидал бы, что Google реализует полное стили CSS.

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

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

Добавьте свойство data-size к элементу google recaptcha и сделайте его равным «компактному» для мобильных устройств.

Обратитесь: google recaptcha docs

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

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

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

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

Флажок должен находиться в том месте, где нажимает пользователь.

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

См. Эту демонстрацию 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 class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div> 

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

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

Просто добавляю хакерское решение, чтобы сделать его отзывчивым.

Оберните рекапчу в дополнительный 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, чтобы уменьшить высоту. К сожалению, любая комбинация overflow: hidden и меньшей высоты убивает iframe.

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

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

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

а. data-callback = ””. Это работает так же, как и капча флажка, но требуется для невидимости.

б. data-badge: это позволяет вам переместить значок reCAPTCHA (т.е. логотип и текст «защищен reCAPTCHA»). Допустимые варианты: «нижний правый» (по умолчанию), «нижний левый» или «встроенный», при которых значок помещается прямо над кнопкой. Если вы сделаете значок встроенным, вы можете напрямую управлять CSS значка.

Если кто-то борется с 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;
}

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

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

Итак, я создал сценарий 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 (готово / проверено). Идея состоит в том, чтобы сделать рекапчу по умолчанию «невидимой» и поместить на нее кнопку. Просто измените идентификатор рекапчи и все.

<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 | Богиня компьютерщиков»  была предоставлена Викрамом Сингхом Сайни и просто описывает, что вы можете использовать встроенный 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. Я использовал это в одном из моих приложений Angular 8

Я наткнулся на этот ответ, пытаясь стилизовать ReCaptcha v2 для сайта, который имеет светлый и темный режимы. Еще немного поигрался и обнаружил, что, кроме того transform, filterон также применяется к iframeэлементам, поэтому в итоге использовал ReCaptcha по умолчанию / light и делал это, когда пользователь находится в темном режиме:

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

Благодаря hue-rotate(180deg)этому логотип остается синим, а галочка остается зеленой, когда пользователь щелкает по ней, при этом белый цвет остается invert()черным и наоборот.

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

Вы можете использовать CSS для стиля Google reCAPTCHA v2 на своем веб-сайте:

- Изменить фон, цвет виджета Google reCAPTCHA v2:

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

или

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

- Измените размер виджета Google reCAPTCHA v2 с помощью этого фрагмента:

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

- Отзывчивый ваш Google reCAPTCHA v2:

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

Все элементы, свойство CSS выше, только для справки. Вы можете изменить их самостоятельно (только с помощью селектора классов CSS).

См. Блог OIW - Как изменить CSS в Google reCAPTCHA (изменить стиль, изменить положение, изменить размер значка reCAPTCHA)

Вы также можете узнать о стилях Google reCAPTCHA v3 там.