Tôi đã không thành công khi tìm cách tạo kiểu recaptcha mới của Google (v2). Mục tiêu cuối cùng là làm cho nó đáp ứng, nhưng tôi đang gặp khó khăn trong việc áp dụng kiểu cho những thứ đơn giản như chiều rộng.

Tài liệu API của họ dường như không cung cấp bất kỳ chi tiết cụ thể nào về cách kiểm soát kiểu dáng ngoài thông số chủ đề và các giải pháp CSS & JavaScript đơn giản không phù hợp với tôi.

Về cơ bản, tôi cần có thể áp dụng CSS cho phiên bản reCaptcha mới của Google. Sử dụng JavaScript với nó là chấp nhận được.

Tổng quat:

Xin lỗi bạn là người trả lời tin xấu, nhưng sau khi nghiên cứu và gỡ lỗi, rõ ràng là không có cách nào để tùy chỉnh kiểu dáng của các điều khiển reCAPTCHA mới. Các điều khiển được bao bọc trong một iframengăn chặn việc sử dụng CSS để tạo kiểu cho chúng và Chính sách cùng nguồn gốc ngăn JavaScript truy cập nội dung, loại trừ ngay cả một giải pháp hack.

Tại sao không tùy chỉnh API ?:

Không giống như phiên bản API reCAPTCHA 1.0 , không có tùy chọn tùy chỉnh trong phiên bản API 2.0 . Nếu chúng ta xem xét cách thức hoạt động của API mới này, không có gì ngạc nhiên tại sao.

Trích từ Bạn có phải là người máy không? Giới thiệu “Không có CAPTCHA reCAPTCHA” :

Mặc dù API reCAPTCHA mới nghe có vẻ đơn giản, nhưng có một mức độ phức tạp cao đằng sau hộp kiểm khiêm tốn đó. CAPTCHA từ lâu đã dựa vào sự bất lực của robot để giải quyết văn bản bị bóp méo. Tuy nhiên, nghiên cứu của chúng tôi gần đây đã chỉ ra rằng công nghệ Trí tuệ nhân tạo ngày nay có thể giải quyết ngay cả những biến thể khó nhất của văn bản bị bóp méo với độ chính xác 99,8%. Do đó, tự nó, văn bản bị bóp méo, không còn là một phép thử đáng tin cậy nữa.

Để chống lại điều này, năm ngoái, chúng tôi đã phát triển chương trình phụ trợ Phân tích rủi ro nâng cao cho reCAPTCHA chủ động xem xét toàn bộ tương tác của người dùng với CAPTCHA — trước, trong và sau — để xác định xem người dùng đó có phải là con người hay không. Điều này cho phép chúng tôi ít phụ thuộc hơn vào việc nhập văn bản bị méo và do đó, mang lại trải nghiệm tốt hơn cho người dùng. Chúng tôi đã nói về điều này trong bài đăng Ngày lễ tình nhân vào đầu năm nay.

Nếu bạn có thể thao tác trực tiếp kiểu dáng của các phần tử điều khiển, bạn có thể dễ dàng can thiệp vào logic hồ sơ người dùng để làm cho reCAPTCHA mới khả thi.

Còn về Chủ đề tùy chỉnh thì sao ?:

Bây giờ API mới cung cấp một themetùy chọn , theo đó bạn có thể chọn một chủ đề đặt trước chẳng hạn như lightvà dark. Tuy nhiên, hiện không có cách nào để tạo chủ đề tùy chỉnh. Nếu chúng ta kiểm tra iframe, chúng ta sẽ thấy themetên được chuyển vào chuỗi truy vấn của srcthuộc tính. URL này trông giống như sau.

https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...

Tham số này xác định tên lớp CSS nào được sử dụng trên phần tử trình bao bọc trong iframevà xác định chủ đề đặt trước sẽ sử dụng.

Đào thông qua các nguồn minified, tôi thấy rằng thực sự có giá trị 4 chủ đề hợp lệ, mà là nhiều hơn 2 liệt kê trong tài liệu hướng dẫn, nhưng defaultvà standardcũng giống như light.

Chúng ta có thể xem đoạn mã chọn tên lớp từ đối tượng này tại đây.

Không có mã cho chủ đề tùy chỉnh và nếu bất kỳ themegiá trị nào khác được chỉ định, nó sẽ sử dụng standardchủ đề.

Tóm lại là:

Hiện tại, không có cách nào để tạo kiểu đầy đủ cho các phần tử reCAPTCHA mới, chỉ iframecó thể cách điệu các phần tử của trình bao bọc xung quanh . Điều này gần như chắc chắn được thực hiện có chủ đích, để ngăn người dùng phá vỡ logic hồ sơ người dùng, điều này làm cho hộp kiểm không có hình ảnh xác thực mới có thể thực hiện được. Có thể Google có thể triển khai API chủ đề tùy chỉnh giới hạn, có thể cho phép bạn chọn màu tùy chỉnh cho các phần tử hiện có, nhưng tôi không mong đợi Google triển khai kiểu CSS đầy đủ.

Như những người đã đề cập ở trên, không có cách nào ATM. nhưng nếu có ai quan tâm, thì bằng cách thêm vào chỉ hai dòng, ít nhất bạn có thể làm cho nó trông hợp lý, nếu nó bị vỡ trên bất kỳ màn hình nào. bạn có thể gán giá trị khác nhau trong truy vấn @media.

<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>

Hy vọng điều này sẽ giúp bất cứ ai :-).

Rất tiếc, chúng tôi không thể tạo kiểu reCaptcha v2, nhưng có thể làm cho nó trông đẹp hơn, đây là mã:

Bấm vào đây để xem trước

.g-recaptcha-outer{
    text-align: center;
    border-radius: 2px;
    background: #f9f9f9;
    border-style: solid;
    border-color: #37474f;
    border-width: 1px;
    border-bottom-width: 2px;
}
.g-recaptcha-inner{
    width: 154px;
    height: 82px;
    overflow: hidden;
    margin: 0 auto;
}
.g-recaptcha{
    position:relative;
    left: -2px;
    top: -1px;
}

<div class="g-recaptcha-outer">
    <div class="g-recaptcha-inner">
        <div class="g-recaptcha" data-size="compact" data-sitekey="YOUR KEY"></div>
    </div>
</div>

Thêm thuộc tính data-size vào phần tử google recaptcha và làm cho nó bằng "compact" trong trường hợp thiết bị di động.

Tham khảo: google recaptcha docs

Tôi sử dụng thủ thuật dưới đây để làm cho nó phản hồi và xóa đường viền. thủ thuật này có thể ẩn thông báo / lỗi recaptcha.

Phong cách này dành cho rtl lang nhưng bạn có thể thay đổi nó dễ dàng.

.g-recaptcha {
    position: relative;
    width: 100%;
    background: #f9f9f9;
    overflow: hidden;
}

.g-recaptcha > * {
    float: right;
    right: 0;
    margin: -2px -2px -10px;/*remove borders*/ 
}

.g-recaptcha::after{
    display: block;
    content: "";
    position: absolute;
    left:0;
    right:150px;
    top: 0;
    bottom:0;
    background-color: #f9f9f9;
    clear: both;
}

<div class="g-recaptcha" data-sitekey="Your Api Key"></div>
<script src='https://www.google.com/recaptcha/api.js?hl=fa'></script>

Những gì bạn có thể làm là ẩn Điều khiển ReCaptcha đằng sau một div. Sau đó, tạo kiểu của bạn trên div này. Và đặt css "pointer-events: none" trên đó, để bạn có thể nhấp qua div ( Nhấp qua DIV đến các phần tử cơ bản ).

Hộp kiểm phải ở nơi mà người dùng đang nhấp vào.

Bạn có thể tạo lại recaptcha, bọc nó trong một vùng chứa và chỉ để hộp kiểm hiển thị. Vấn đề chính của tôi là tôi không thể lấy toàn bộ chiều rộng nên bây giờ nó mở rộng theo chiều rộng vùng chứa. Vấn đề duy nhất là hết hạn, bạn có thể thấy một cú nhấp nháy nhưng ngay sau khi nó xảy ra, tôi đã đặt lại nó.

Xem bản trình diễn này http://codepen.io/alejandrolechuga/pen/YpmOJX

function recaptchaReady () {
  grecaptcha.render('myrecaptcha', {
  'sitekey': '6Lc7JBAUAAAAANrF3CJaIjt7T9IEFSmd85Qpc4gj',
  'expired-callback': function () {
    grecaptcha.reset();
    console.log('recatpcha');
  }
});
}

.recaptcha-wrapper {
    height: 70px;
  overflow: hidden;
  background-color: #F9F9F9;
  border-radius: 3px;
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
  height: 70px;
  position: relative;
  margin-top: 17px;
  border: 1px solid #d3d3d3;
  color: #000;
}

.recaptcha-info {
  background-size: 32px;
  height: 32px;
  margin: 0 13px 0 13px;
  position: absolute;
  right: 8px;
  top: 9px;
  width: 32px;
  background-image: url(https://www.gstatic.com/recaptcha/api2/logo_48.png);
  background-repeat: no-repeat;
}
.rc-anchor-logo-text {
  color: #9b9b9b;
  cursor: default;
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  margin-top: 5px;
  text-align: center;
  position: absolute;
  right: 10px;
  top: 37px;
}
.rc-anchor-checkbox-label {
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  left: 50px;
  top: 26px;
  position: absolute;
  color: black;
}
.rc-anchor .rc-anchor-normal .rc-anchor-light {
  border: none;
}
.rc-anchor-pt {
  color: #9b9b9b;
  font-family: Roboto,helvetica,arial,sans-serif;
  font-size: 8px;
  font-weight: 400;
  right: 10px;
  top: 53px;
  position: absolute;
  a:link {
    color: #9b9b9b;
    text-decoration: none;
  }
}

g-recaptcha {
  // transform:scale(0.95);
  // -webkit-transform:scale(0.95);
  // transform-origin:0 0;
  // -webkit-transform-origin:0 0;

}

.g-recaptcha {
  width: 41px;

  /* border: 1px solid red; */
  height: 38px;
  overflow: hidden;
  float: left;
  margin-top: 16px;
  margin-left: 6px;
  
    > div {
    width: 46px;
    height: 30px;
    background-color:  #F9F9F9;
    overflow: hidden;
    border: 1px solid red;
    transform: translate3d(-8px, -19px, 0px);
  }
  div {
    border: 0;
  }
}

<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReady&&render=explicit'></script>

<div class="recaptcha-wrapper">
  <div id="myrecaptcha" class="g-recaptcha"></div>
          <div class="rc-anchor-checkbox-label">I'm not a Robot.</div>
        <div class="recaptcha-info"></div>
        <div class="rc-anchor-logo-text">reCAPTCHA</div>
        <div class="rc-anchor-pt">
          <a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a>
          <span aria-hidden="true" role="presentation"> - </span>
          <a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a>
        </div>
</div>

Tuyệt quá! Bây giờ ở đây có sẵn kiểu tạo kiểu cho reCaptcha .. Tôi chỉ sử dụng kiểu nội tuyến như:

<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div> 

bất cứ điều gì bạn muốn tùy chỉnh nhỏ trong tạo kiểu nội tuyến ...

Hy vọng nó sẽ giúp ích cho bạn !!

Chỉ cần thêm một giải pháp hack-ish để làm cho nó phản hồi.

Gói recaptcha trong một div phụ:

<div class="recaptcha-wrap">                   
    <div id="g-recaptcha"></div>
</div>

Thêm phong cách. Điều này giả định chủ đề tối.

// Recaptcha
.recaptcha-wrap {
    position: relative;
    height: 76px;
    padding:1px 0 0 1px;
    background:#222;
    > div {
        position: absolute;
        bottom: 2px;
        right:2px;
        font-size:10px;
        color:#ccc;
    }
}

// Hides top border
.recaptcha-wrap:after {
    content:'';
    display: block;
    background-color: #222;
    height: 2px;
    width: 100%;
    top: -1px;
    left: 0px;
    position: absolute;
}

// Hides left border
.recaptcha-wrap:before {
    content:'';
    display: block;
    background-color: #222;
    height: 100%;
    width: 2px;
    top: 0;
    left: -1px;
    position: absolute;
    z-index: 1;
}

// Makes it responsive & hides cut-off elements
#g-recaptcha {
    overflow: hidden;
    height: 76px;
    border-right: 60px solid #222222;
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222;
    position: relative;
    box-sizing: border-box;
    max-width: 294px;
}

Điều này dẫn đến kết quả sau:

Bây giờ nó sẽ thay đổi kích thước theo chiều ngang và không có đường viền. Biểu trưng recaptcha sẽ bị cắt ở bên phải, vì vậy tôi đang ẩn nó bằng một đường viền bên phải. Nó cũng ẩn các liên kết về quyền riêng tư và điều khoản, vì vậy bạn có thể muốn thêm chúng vào lại.

Tôi đã cố gắng đặt chiều cao trên phần tử trình bao bọc, sau đó căn giữa theo chiều dọc của recaptcha để giảm chiều cao. Thật không may, bất kỳ kết hợp nào của tràn: ẩn và chiều cao nhỏ hơn dường như sẽ giết iframe.

trong phiên bản V2.0 thì không thể. Khung nội tuyến chặn tất cả các kiểu ra khỏi điều này. Thật khó để thêm chủ đề tùy chỉnh thay vì chủ đề tối hoặc sáng.

Với việc tích hợp reCAPTCHA vô hình, bạn có thể làm như sau:

Để bật reCAPTCHA vô hình, thay vì đặt các tham số trong một div, bạn có thể thêm chúng trực tiếp vào một nút html.

a. data-callback = ””. Điều này hoạt động giống như captcha hộp kiểm, nhưng được yêu cầu để ẩn.

b. data-huy hiệu: Điều này cho phép bạn định vị lại huy hiệu reCAPTCHA (tức là biểu trưng và văn bản 'được bảo vệ bởi reCAPTCHA'). Các tùy chọn hợp lệ như 'bottomright' (mặc định), 'bottomleft' hoặc 'inline' sẽ đặt huy hiệu ngay phía trên nút. Nếu bạn tạo huy hiệu nội dòng, bạn có thể kiểm soát trực tiếp CSS của huy hiệu.

Trong trường hợp ai đó đang gặp khó khăn với recaptcha của contact form 7 (wordpress) thì đây là một giải pháp phù hợp với tôi

.wpcf7-recaptcha{
clear: both;
float: left;
}
.wpcf7-recaptcha{
margin-right: 6px;
width: 206px;
height: 65px;
overflow: hidden;
border-right: 1px solid #D3D3D3;
}
.wpcf7-recaptcha iframe{
padding-bottom: 15px;
border-bottom: 1px solid #D3D3D3;
background: #F9F9F9;
border-left: 1px solid #d3d3d3;
}

Đến bữa tiệc muộn, nhưng có lẽ giải pháp của tôi sẽ giúp được ai đó.

Tôi không tìm thấy bất kỳ giải pháp nào hoạt động trên trang web đáp ứng khi chế độ xem thay đổi hoặc bố cục không ổn định.

Vì vậy, tôi đã tạo một tập lệnh jQuery cho django-cms thích ứng động với một khung nhìn đang thay đổi. Tôi sẽ cập nhật câu trả lời này ngay khi tôi có nhu cầu về một biến thể hiện đại của nó theo mô-đun hơn và không có sự phụ thuộc vào jQuery.

html

<div class="g-recaptcha" data-sitekey="{site_key}" data-size={size}> 
</div> 

css

.g-recaptcha { display: none; }

.g-recaptcha.g-recaptcha-initted { 
    display: block; 
    overflow: hidden; 
}

.g-recaptcha.g-recaptcha-initted > * {
    transform-origin: top left;
}

js

window.djangoReCaptcha = {
    list: [],
    setup: function() {
        $('.g-recaptcha').each(function() {
            var $container = $(this);
            var config = $container.data();

            djangoReCaptcha.init($container, config);
        });

        $(window).on('resize orientationchange', function() {
            $(djangoReCaptcha.list).each(function(idx, el) {
                djangoReCaptcha.resize.apply(null, el);
            });
        });
    },
    resize: function($container, captchaSize) {
        scaleFactor = ($container.width() / captchaSize.w);
        $container.find('> *').css({
            transform: 'scale(' + scaleFactor + ')',
            height: (captchaSize.h * scaleFactor) + 'px'
        });
    },
    init: function($container, config) {
        grecaptcha.render($container.get(0), config);

        var captchaSize, scaleFactor;
        var $iframe = $container.find('iframe').eq(0);

        $iframe.on('load', function() {
            $container.addClass('g-recaptcha-initted');
            captchaSize = captchaSize || { w: $iframe.width() - 2, h: $iframe.height() };
            djangoReCaptcha.resize($container, captchaSize);
            djangoReCaptcha.list.push([$container, captchaSize]);
        });
    },
    lateInit: function(config) {
        var $container = $('.g-recaptcha.g-recaptcha-late').eq(0).removeClass('.g-recaptcha-late');
        djangoReCaptcha.init($container, config);
    }
};

window.djangoReCaptchaSetup = window.djangoReCaptcha.setup;

Nếu ai đó vẫn quan tâm, có một thư viện javascript đơn giản (không phụ thuộc jQuery), được đặt tên là recaptcha tùy chỉnh. Nó cho phép bạn tùy chỉnh nút bằng css và triển khai một số sự kiện js (đã sẵn sàng / đã kiểm tra). Ý tưởng là làm cho recaptcha mặc định "ẩn" và đặt một nút trên nó. Chỉ cần thay đổi id của recaptcha là xong.

<head>
    <script src="https://azentreprise.org/download/custom-recaptcha.min.js"></script>
    <style type="text/css">
        #captcha {
            float: left;
            margin: 2%;

            background-color: rgba(72, 61, 139, 0.5); /* darkslateblue with 50% opacity */
            border-radius: 2px;

            font-size: 1em;
            color: #C0FFEE;
        }

        #captcha.success {
            background-color: rgba(50, 205, 50, 0.5); /* limegreen with 50% opacity */
            color: limegreen;
        }
    </style>
</head>
<body>
    <div id="captcha" data-sitekey="your_site_key" data-label="Click here" data-label-spacing="15"></div>
</body>

Xem https://azentreprise.org/read.php?id=1 để biết thêm thông tin.

Tôi chỉ thêm loại giải pháp / sửa chữa nhanh này để nó không bị mất trong trường hợp liên kết bị hỏng.

Liên kết tới giải pháp này "Muốn thêm liên kết Cách thay đổi kích thước của Google noCAPTCHA reCAPTCHA | Nữ thần Geek"  do Vikram Singh Saini cung cấp và chỉ đơn giản là bạn có thể sử dụng CSS nội tuyến để thực thi việc đóng khung iframe.

// Scale the frame using inline CSS
 <div class="g-recaptcha" data-theme="light" 
 data-sitekey="XXXXXXXXXXXXX" 

 style="transform:scale(0.77);
 -webkit-transform:scale(0.77);
 transform-origin:0 0;
  -webkit-transform-origin:0 0;

 ">
</div> 

// Scale the images using a stylesheet
<style>
#rc-imageselect, .g-recaptcha {
  transform:scale(0.77);
  -webkit-transform:scale(0.77);
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
}
</style>

Bạn cũng có thể chọn giữa chủ đề ReCaptcha tối hoặc sáng . Tôi đã sử dụng cái này trong một trong những Ứng dụng Angular 8 của mình

Tôi đã gặp câu trả lời này khi cố gắng tạo kiểu ReCaptcha v2 cho một trang web có chế độ sáng và tối. Chơi xung quanh một số nữa và phát hiện ra rằng bên cạnh đó transform, filtercũng được áp dụng cho iframecác phần tử nên cuối cùng đã sử dụng ReCaptcha mặc định / sáng và thực hiện điều này khi người dùng ở chế độ tối:

.g-recaptcha {
    filter: invert(1) hue-rotate(180deg);
}

Nó hue-rotate(180deg)làm cho biểu trưng vẫn có màu xanh lam và dấu kiểm vẫn có màu xanh lục khi người dùng nhấp vào nó, trong khi giữ màu trắng invert()chuyển sang màu đen và ngược lại.

Không thấy điều này trong bất kỳ câu trả lời hoặc bình luận nào nên quyết định chia sẻ ngay cả khi đây là một chủ đề cũ.

Bạn có thể sử dụng một số CSS để tạo kiểu reCAPTCHA v2 của Google trên trang web của mình:

- Thay đổi nền, màu của widget reCAPTCHA v2 của Google:

.rc-anchor-light { 
background: #fff!important; 
color: #fff!important; }

hoặc là

.rc-anchor-normal{
background: #000 !important; 
color: #000 !important; }

- Thay đổi kích thước của tiện ích reCAPTCHA v2 của Google bằng cách sử dụng đoạn mã này:

.rc-anchor-light { 
transform:scale(0.9); 
-webkit-transform:scale(0.9); }

- Phản hồi lại Google reCAPTCHA v2 của bạn:

@media only screen and (min-width: 768px) {
.rc-anchor-light { 
transform:scale(0.85); 
-webkit-transform:scale(0.85); } 
}

Tất cả các phần tử, thuộc tính của CSS ở trên chỉ để bạn tham khảo. Bạn có thể tự mình thay đổi chúng (chỉ sử dụng bộ chọn lớp CSS).

Tham khảo trên Blog OIW - Cách chỉnh sửa CSS của Google reCAPTCHA (Định kiểu lại, Thay đổi vị trí, Thay đổi kích thước Huy hiệu reCAPTCHA)

Bạn cũng có thể tìm hiểu kiểu của Google reCAPTCHA v3 ở đó.