Chúng tôi vừa bắt đầu triển khai google recaptcha mới như được liệt kê https://www.google.com/recaptcha/intro/index.html
Tuy nhiên, phương pháp mới dường như được chứa trong iFrame chứ không phải được nhúng vào trang, do đó việc áp dụng CSS khó khăn hơn.
Tuy nhiên, chúng tôi có biểu mẫu có chiều rộng 400px, vì vậy muốn có recaptcha có cùng chiều rộng.
Hiện tại nó trông giống như vậy, tuy nhiên chúng tôi muốn nó giống với phần còn lại.
Có ai biết làm thế nào để làm điều này chưa?
Cảm ơn
Câu trả lời:
Đây là một tác phẩm xung quanh nhưng không phải lúc nào cũng là một tác phẩm tuyệt vời, tùy thuộc vào mức độ bạn mở rộng quy mô của nó. Giải thích có thể được tìm thấy tại đây: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
.g-recaptcha {
transform:scale(0.77);
transform-origin:0 0;
}
CẬP NHẬT: Google đã thêm hỗ trợ cho kích thước nhỏ hơn thông qua một tham số. Hãy xem tài liệu - https://developers.google.com/recaptcha/docs/display#render_param
data-size="compact" không hoạt động nhỏ gọn đối với tôi. Đoán chúng tôi sẽ dính vào mở rộng quy mô với đổi
Không, hiện tại bạn không thể. Nó chỉ có thể thực hiện được với recaptcha cũ, nhưng tôi chắc chắn rằng bạn sẽ làm được điều đó trong tương lai.
Tôi không có giải pháp nào ngoài một gợi ý. Tôi đã gặp vấn đề tương tự, vì vậy tôi căn giữa recaptcha div ( margin: 0 auto;display: table), tôi nghĩ nó trông đẹp hơn nhiều so với div căn trái.
Để tương thích hơn:
-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;
-moz-hoặc -o-vì chúng không cần thiết.
Hơi muộn nhưng tôi có một giải pháp dễ dàng:
Chỉ cần thêm mã này vào lớp "g-recaptcha" của bạn:
width: desired_width;
border-radius: 4px;
border-right: 1px solid #d8d8d8;
overflow: hidden;
Đối với phiên bản mới của noCaptcha Recaptcha, những điều sau phù hợp với tôi:
<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>
Tôi đã tìm thấy những cách tốt nhất sau đây để thay đổi kích thước google recaptchas
Tùy chọn 1: Bạn có thể thay đổi kích thước Google ReCaptcha bằng cách sử dụng kiểu nội tuyến.
Một cách đầu tiên để thay đổi kích thước google recapture bằng cách sử dụng kiểu nội tuyến. Kiểu nội tuyến là kiểu CSS được áp dụng cho một phần tử, trực tiếp trong HTML của trang, sử dụng thuộc tính style. Đây là ví dụ cho bạn thấy cách bạn tạo kiểu reCAPTCHA của Google bằng cách sử dụng kiểu nội dòng.
<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>
Tùy chọn 2: Bằng cách đặt kiểu sau vào trang của bạn (Bảng kiểu nội bộ).
Thứ hai, bạn có thể đặt phong cách cho ReCaptcha vào trang giữa và. Biểu định kiểu nội bộ là một phần trên trang HTML có chứa các định nghĩa về kiểu. Các biểu định kiểu nội bộ được xác định bằng cách sử dụng thẻ trong khu vực của tài liệu. Đây là ví dụ cho bạn thấy cách bạn tạo kiểu cho reCAPTCHA của Google bằng cách sử dụng bảng định kiểu bên ngoài.
<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>
Tùy chọn 3: Thay đổi kích thước google ReCaptcha bằng cách sử dụng biểu định kiểu bên ngoài.
Tạo một tệp riêng biệt và đặt tên như style.css và thêm liên kết tệp này vào giữa một phần tử trong trang của bạn. Đối với người yêu cũ. .
<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>
Tham khảo từ blog: https://www.scratchcode.io/how-to-resize-the-google-recaptcha/
.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');
}
Tôi có chức năng này trong sự kiện sẵn sàng tài liệu để reCaptcha có kích thước động. Bất cứ ai cũng có thể đặt nó tại chỗ và đi.
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';
}
}
Đây là công việc của tôi xung quanh:
1) Thêm div trình bao bọc vào div recaptcha.
<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>
2) Thêm mã 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) Tùy chọn: thêm một số kiểu nếu cần.
#recaptcha-wrapper {
text-align:center;
margin-bottom:15px;
}
.g-recaptcha {
display:inline-block;
}
Đã muộn, nhưng chỉ muốn giúp đỡ người khác nếu vẫn gặp phải vấn đề. Tôi đã tìm thấy giải pháp JS tốt ở đây: https://github.com/google/recaptcha/issues/61#issuecomment-376484690
Đây là mã JavaScript sử dụng jQuery để làm như vậy:
$(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 Lưu ý: Nó cũng sẽ hỗ trợ Tất cả thiết bị, chiều rộng trên và dưới là 320px.
tiếc là không có cái nào ở trên hoạt động. Cuối cùng tôi có thể làm điều đó bằng cách sử dụng những thứ sau: Giải pháp này hoạt động 100% (điều chỉnh nó theo nhu cầu của bạn)
.g-recaptcha-wrapper {
position: relative;
border: 1px solid #ededed;
background: #f9f9f9;
border-radius: 4px;
padding: 0;
#topHider {
position: absolute;
top: 0;
left: 0;
height: 2px !important;
width: 100%;
background-color: #f9f9f9;
}
#rightHider {
position: absolute;
top: 0;
left: 295px;
height: 100% !important;
width: 15px;
background-color: #f9f9f9;
}
#leftHider {
position: absolute;
top: 0;
left: 0;
height: 100% !important;
width: 2px;
background-color: #f9f9f9;
}
#bottomHider {
position: absolute;
bottom: 1px;
left: 0;
height: 2px !important;
width: 100%;
background-color: #f9f9f9;
}
}<div class="g-recaptcha-wrapper">
<re-captcha #captchaRef="reCaptcha" (resolved)="onCaptchaResolved($event)" siteKey="{{captchaSiteKey}}"></re-captcha>
<div id="topHider"></div>
<div id="rightHider"></div>
<div id="bottomHider"></div>
<div id="leftHider"></div>
</div>Kết quả
