Мы только начали внедрять новую утилиту google recaptcha, как указано https://www.google.com/recaptcha/intro/index.html
Однако новый метод, кажется, содержится внутри iFrame, а не встроен в страницу, тем самым затрудняя применение CSS.
Однако у нас есть наша форма шириной 400 пикселей, поэтому хотелось бы, чтобы recaptcha была одинаковой шириной.
В настоящее время это выглядит, однако мы бы хотели, чтобы он был таким же, как и остальные.
Кто-нибудь знает, как это сделать?
Спасибо
Вот работа, но не всегда отличная, в зависимости от того, насколько вы ее масштабируете. Объяснение можно найти здесь: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
.g-recaptcha {
transform:scale(0.77);
transform-origin:0 0;
}
UPDATE: Google добавила поддержку меньшего размера с помощью параметра. Взгляните на документы - https://developers.google.com/recaptcha/docs/display#render_param
Для большей совместимости:
-webkit-transform: scale(0.77);
-moz-transform: scale(0.77);
-ms-transform: scale(0.77);
-o-transform: scale(0.77);
transform: scale(0.77);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
Нет, в настоящее время вы не можете. Это было возможно только со старой recaptcha, но я уверен, что вы сможете это сделать в будущем.
У меня нет решения, кроме предложения. У меня была та же проблема, поэтому я сосредоточил recaptcha div
(margin: 0 auto;display: table), я думаю, что он выглядит намного лучше, чем выровненный слева div.
Немного поздно, но у меня есть простой способ:
Просто добавьте этот код в свой класс "g-recaptcha":
width: desired_width;
border-radius: 4px;
border-right: 1px solid #d8d8d8;
overflow: hidden;
Для новой версии noCaptcha Recaptcha для меня работает следующее:
<div class="g-recaptcha"
data-sitekey="6LcVkQsTAAAAALqSUcqN1zvzOE8sZkOq2GMBE-RK"
style="transform:scale(0.7);transform-origin:0;-webkit-transform:scale(0.7);
transform:scale(0.7);-webkit-transform-origin:0 0;transform-origin:0 0;"></div>
.g-recaptcha{
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
-moz-transform-origin:0;
-ms-transform-origin:0;
-o-transform-origin:0;
-webkit-transform:scale(1.1);
transform:scale(1.1);
-webkit-transform-origin:0 0;
transform-origin:0;
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1,M12=0,M21=0,M22=1.1,SizingMethod='auto expand');
}
У меня есть эта функция в событии готовности документа, так что reCaptcha имеет динамический размер. Любой человек должен иметь возможность отказаться от этого на месте и уйти.
function ScaleReCaptcha()
{
if (document.getElementsByClassName('g-recaptcha').length > 0)
{parentWidth = document.getElementsByClassName('g-recaptcha') [0].parentNode.clientWidth;
childWidth = document.getElementsByClassName('g-recaptcha')[0].firstChild.clientWidth;
scale = (parentWidth) / (childWidth);
new_width = childWidth * scale;
document.getElementsByClassName('g-recaptcha')[0].style.transform = 'scale(' + scale + ')';
document.getElementsByClassName('g-recaptcha')[0].style.transformOrigin = '0 0';
}
}
Это моя работа:
1) Добавьте обертку div в div recaptcha.
<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>
2) Добавьте код javascript/jquery.
$(function(){
// global variables
captchaResized = false;
captchaWidth = 304;
captchaHeight = 78;
captchaWrapper = $('#recaptcha-wrapper');
captchaElements = $('#rc-imageselect, .g-recaptcha');
resizeCaptcha();
$(window).on('resize', function() {
resizeCaptcha();
});
});
function resizeCaptcha() {
if (captchaWrapper.width() >= captchaWidth) {
if (captchaResized) {
captchaElements.css('transform', '').css('-webkit-transform', '').css('-ms-transform', '').css('-o-transform', '').css('transform-origin', '').css('-webkit-transform-origin', '').css('-ms-transform-origin', '').css('-o-transform-origin', '');
captchaWrapper.height(captchaHeight);
captchaResized = false;
}
} else {
var scale = (1 - (captchaWidth - captchaWrapper.width()) * (0.05/15));
captchaElements.css('transform', 'scale('+scale+')').css('-webkit-transform', 'scale('+scale+')').css('-ms-transform', 'scale('+scale+')').css('-o-transform', 'scale('+scale+')').css('transform-origin', '0 0').css('-webkit-transform-origin', '0 0').css('-ms-transform-origin', '0 0').css('-o-transform-origin', '0 0');
captchaWrapper.height(captchaHeight * scale);
if (captchaResized == false) captchaResized = true;
}
}
3) Необязательно: при необходимости добавьте стиль.
#recaptcha-wrapper {
text-align:center;
margin-bottom:15px;
}
.g-recaptcha {
display:inline-block;
}
Теперь вы можете использовать приведенный ниже код (от Google) <div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>
Я нашел следующие лучшие способы изменить размеры Google Recaptchas
Вариант 1. Вы можете изменить размер Google ReCaptcha с помощью встроенного стиля.
Самый первый способ изменить размеры Google Recapture с помощью встроенного стиля. Встроенные стили - это стили CSS, которые применяются к одному элементу непосредственно в HTML страницы с помощью атрибута style. Вот пример, который показывает вам, как правильно оформить Google reCAPTCHA с помощью встроенного стиля.
<div class="g-recaptcha" style="transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0;" data-theme="light" data-sitekey="XXXXXXXXXXXXX"></div>
Вариант 2. Поместив следующий стиль на страницу (Внутренняя таблица стилей).
Во-вторых, вы можете поместить стиль для ReCaptcha на страницу между и. Внутренняя таблица стилей - это раздел HTML-страницы, содержащий определения стилей. Внутренние таблицы стилей определяются с помощью тега в области документа. Вот пример, который показывает, как стилизовать Google reCAPTCHA с помощью внешней таблицы стилей.
<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>
Вариант 3. Изменение размера Google ReCaptcha с помощью внешней таблицы стилей.
Создайте отдельный файл и дайте имя, например style.css, и добавьте ссылку на этот файл между вашим элементом на странице. Например ,
<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>
Вы можете использовать параметр из reCaptcha. По умолчанию он использует normal значение для data-size Вам просто нужно использовать compact чтобы разместить его на небольших устройствах или в некотором роде с разметкой небольшой ширины.
пример:
<div class="g-recaptcha" data-size="compact"></div>
Было уже поздно, но я просто хочу помочь другим, если все еще сталкиваюсь с проблемой. Я нашел хорошее решение JS здесь: https://github.com/google/recaptcha/issues/61#issuecomment-376484690
Вот код JavaScript, использующий для этого jQuery:
$(document).ready(function () {
var width = $('.g-recaptcha').parent().width();
if (width < 302) {
var scale = width / 302;
$('.g-recaptcha').css('transform', 'scale(' + scale + ')');
$('.g-recaptcha').css('-webkit-transform', 'scale(' + scale + ')');
$('.g-recaptcha').css('transform-origin', '0 0');
$('.g-recaptcha').css('-webkit-transform-origin', '0 0');
}
});
IMP Примечание: Он будет поддерживать все устройства, шириной свыше 320 пикселей и выше.