Ответ 1

Обзор:

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

Почему нет API настройки?:

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

Выдержка из Вы робот? Представляем "No CAPTCHA reCAPTCHA" :

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

Чтобы противостоять этому, в прошлом году мы разработали бэкэнд Advanced Risk Analysis для 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.

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

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

Ответ 2

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

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

Надеюсь, это поможет любому: -).

Ответ 3

К сожалению, мы не можем использовать стиль 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>

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

Смотрите это демо 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>

Ответ 7

Я использую ниже трюк, чтобы сделать его отзывчивым и удалить границы. эти трюки могут скрывать сообщение/ошибку 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>

Ответ 8

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

Оберните 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.

Ответ 9

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

Ответ 10

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

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

а. данных обратного вызова = ". Это работает так же, как флажок captcha, но необходим для невидимого.

б. data-badge: Это позволяет вам переустановить значок reCAPTCHA (то есть логотип и 'Защищен текстом reCAPTCHA). Допустимые параметры:" rightright "(по умолчанию)," Bottomleft "или" inline", который поместит значок непосредственно над кнопкой. если ты сделайте значок встроенным, вы можете напрямую контролировать CSS значка.

Ответ 11

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

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

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

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

Ответ 12

В случае, если кто-то борется с повторением контактной формы 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;
}

Ответ 13

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

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

Итак, я создал jQuery script для 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;

Ответ 14

Если кому-то все еще интересно, есть простая библиотека javascript (без зависимости jQuery), называемая пользовательской recaptcha. Он позволяет настраивать кнопку с помощью css и реализовывать некоторые события js (готово/проверено). Идея состоит в том, чтобы сделать 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.

Ответ 15

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

Ссылка на это решение "Хотите добавить ссылку Как изменить размер 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>

Ответ 16

Вы можете использовать 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.