Я не мав особливого успіху в пошуку стилів нового рекаптха Google (v2). Можлива мета - зробити його чуйним, але у мене виникають труднощі із застосуванням стилів для навіть простих речей, таких як ширина.

Їх документація API не дає ніякої конкретики щодо управління стилем взагалі, крім параметра теми , а прості рішення CSS та JavaScript не працювали для мене.

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

Огляд:

Вибачте за відповідь поганих новин, але після дослідження та налагодження, цілком зрозуміло, що немає способу налаштувати стиль нових елементів керування reCAPTCHA. Елементи управління загорнуті в iframe, що запобігає використанню CSS для їх стилю, а Policy-Origin Policy не дозволяє 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тему.

На завершення:

В даний час не існує можливості повністю стилізувати нові елементи reCAPTCHA, iframeможна лише стилізувати елементи обгортки навколо балончика. Це майже напевно було зроблено навмисно, щоб не допустити порушення користувачами логіки профілювання користувача, яка робить можливим новий прапорець без капташу. Цілком можливо, що 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>

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

Довідково: google recaptcha docs

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

Що ви можете зробити, це приховати керування ReCaptcha за дивом. Потім зробіть свій стиль на цьому діві. І встановіть на нього 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 class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div> 

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

Сподіваюся, це допоможе вам !!

Просто додайте рішення для злому, щоб зробити його чутливим.

Оберніть recaptcha в додатковий розділ:

<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 буде відрізаний праворуч, тому я приховую його правою межею. Він також приховує посилання на конфіденційність та умови, тому, можливо, ви захочете додати їх знову.

Я спробував встановити висоту на обгортковому елементі, а потім вертикально відцентруйте рекапшту для зменшення висоти. На жаль, будь-яка комбінація переповнення: прихована та менша висота, здається, вбиває iframe.

у V2.0 це неможливо. Iframe блокує всі стилі з цього. Складно додати власну тему замість темної чи світлої.

За допомогою інтеграції невидимого reCAPTCHA ви можете зробити наступне:

Щоб увімкнути Invisible reCAPTCHA, а не ставити параметри у div, ви можете додати їх безпосередньо до кнопки html.

а. data-callback = ””. Це працює так само, як і прапорець Captcha, але потрібно для невидимих.

б. Значок даних: це дозволяє переставляти значок reCAPTCHA (тобто логотип та текст, захищений reCAPTCHA). Дійсні параметри, як "внизу" (за замовчуванням), "знизу" або "вбудовано", що поставить значок прямо над кнопкою. Якщо ви зробите значок в рядку, ви можете безпосередньо керувати CSS значка.

У випадку, якщо хтось бореться з резюме контактної форми 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), названа користувацьким рекапча. Це дозволяє вам налаштувати кнопку 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 для отримання додаткової інформації.

Я просто додаю подібне рішення / швидке виправлення, щоб воно не загубилося у разі розриву зв'язку.

Посилання на це рішення "Хочете додати посилання Як змінити розмір 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. Я використовував це в одному зі своїх програм Angular 8

Я натрапив на цю відповідь, намагаючись стилізувати ReCaptcha v2 для сайту, у якому світлий і темний режим. Пограли ще дещо і виявили, що крім того transform, filterтакож застосовуються до iframeелементів, які в кінцевому підсумку використовуються за замовчуванням / світлом ReCaptcha і роблять це, коли користувач перебуває в темному режимі:

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

Це hue-rotate(180deg)робить так, що логотип все ще синій, а галочка залишається зеленою, коли користувач натискає на нього, зберігаючи білий invert()'чорний колір ' та навпаки.

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

Ви можете використовувати деякі CSS для стилю reCAPTCHA v2 Google на своєму веб-сайті:

- Змінення фону, кольору віджета 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); }

- чуйна ваша reCAPTCHA v2 Google:

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