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

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

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

1

Включить его можно добавлением атрибута 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
2

Уменьшить размер капчи можно 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
3

Включается атрибутом 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
23337
Предыдущая запись Установака recaptcha v2 на сайт
Следующая запись Favicon

Комментарии

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

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

Загрузка файлов на сервер PHP
В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.
75692
+25
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
47965
+35
Округа и районы Москвы в MySQL
Две связанные MYSQL таблицы с округами и районами Москвы.
12031
+4
Таблица символов ASCII + Windows 1251
Список из 256 символов и их коды в ASCII.
1020388
+58
Таблица символов эмодзи
Полная таблица символов эмоджи и их HTML коды.
1007257
+212
Генерация QR-кода в PHP
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой...
75069
+19