HTML/CSS

Стиль и размер 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>
2

Уменьшение масштаба

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

Ниже приведена таблица значений 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>
19 февраля 2018