Стиль и размер ReCaptcha

В продолжении статьи «как интегрировать ReCAPTCHA на сайт» возникает другой вопрос – как изменить ее размер?

Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты формы. Исправить это можно следующими способами:

Включить его можно добавлением атрибута data-size="compact", размер становится 164x144px.

<script src="https://www.google.com/recaptcha/api.js"></script>
<div data-size="compact" class="g-recaptcha" data-sitekey="xxx"></div>
HTML

Уменьшить размер капчи можно CSS-свойством transform:

<script src="https://www.google.com/recaptcha/api.js"></script>
<div style="transform:scale(0.8); transform-origin:0;" class="g-recaptcha" data-sitekey="xxx"></div>
HTML

Ниже приведена таблица значений transform и ширины капчи:

CSS Ширина
transform: scale(0.7); 212px
transform: scale(0.75); 228px
transform: scale(0.8); 243px
transform: scale(0.85); 258px
transform: scale(0.9); 273px
transform: scale(0.95); 288px

Включается атрибутом data-theme="dark".

<script src="https://www.google.com/recaptcha/api.js"></script>
<div data-theme="dark" class="g-recaptcha" data-sitekey="xxx"></div>
HTML
19.02.2018, обновлено 18.10.2019
17443
Следующая запись Favicon

Комментарии

, чтобы добавить комментарий.

Другие публикации

Загрузка файлов на сервер PHP
В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.
51054
+19
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
28368
+31
Округа и районы Москвы в MySQL
Две связанные MYSQL таблицы с округами и районами Москвы.
6205
+2
Таблица символов ASCII + Windows 1251
Список из 256 символов и их коды в ASCII.
546388
+45
Таблица символов эмодзи
Полная таблица символов эмоджи и их HTML коды.
277424
+111
Генерация QR-кода в PHP
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой...
39153
+12