ฉันไม่ประสบความสำเร็จมากนักในการค้นหาวิธีการจัดรูปแบบ recaptcha ใหม่ของ Google (v2) เป้าหมายในที่สุดคือทำให้ตอบสนอง แต่ฉันมีปัญหาในการใช้การจัดแต่งทรงผมสำหรับสิ่งง่ายๆเช่นความกว้าง

เอกสาร APIของพวกเขาดูเหมือนจะไม่ได้ให้รายละเอียดเกี่ยวกับวิธีการควบคุมรูปแบบใด ๆ เลยนอกจากพารามิเตอร์ธีมและโซลูชัน CSS และ JavaScript แบบธรรมดาก็ไม่ได้ผลสำหรับฉัน

โดยพื้นฐานแล้วฉันต้องสามารถใช้ CSS กับ reCaptcha เวอร์ชันใหม่ของ Google ได้ การใช้ JavaScript ร่วมกับมันเป็นสิ่งที่ยอมรับได้

ภาพรวม:

ขออภัยที่เป็นผู้ให้คำตอบของข่าวร้าย แต่หลังจากการวิจัยและการแก้ไขจุดบกพร่องค่อนข้างชัดเจนว่าไม่มีวิธีปรับแต่งรูปแบบของการควบคุม reCAPTCHA ใหม่ การควบคุมจะรวมอยู่ในส่วนiframeที่ป้องกันไม่ให้ใช้ CSS เพื่อจัดรูปแบบและนโยบายแหล่งกำเนิดเดียวกันจะป้องกันไม่ให้ JavaScript เข้าถึงเนื้อหาและกำหนดแม้กระทั่งโซลูชันที่แฮ็ก

ทำไมไม่ปรับแต่ง API:

ไม่เหมือนกับreCAPTCHA API เวอร์ชัน 1.0ไม่มีตัวเลือกการปรับแต่งในAPI เวอร์ชัน 2.02.0 หากเราพิจารณาว่า API ใหม่นี้ทำงานอย่างไรก็ไม่แปลกใจเลยว่าทำไม

ตัดตอนมาจากคุณเป็นหุ่นยนต์หรือไม่? แนะนำ“ No CAPTCHA reCAPTCHA” :

แม้ว่า reCAPTCHA API ใหม่อาจฟังดูเรียบง่าย แต่ก็มีความซับซ้อนสูงอยู่เบื้องหลังช่องทำเครื่องหมายที่เรียบง่าย CAPTCHA อาศัยความไม่สามารถของโรบ็อตในการแก้ไขข้อความที่บิดเบือนมานานแล้ว อย่างไรก็ตามการวิจัยของเราเมื่อเร็ว ๆ นี้แสดงให้เห็นว่าเทคโนโลยีปัญญาประดิษฐ์ในปัจจุบันสามารถแก้ปัญหาข้อความบิดเบี้ยวที่ยากที่สุดได้ด้วยความแม่นยำ 99.8% ด้วยเหตุนี้ข้อความที่บิดเบี้ยวจึงไม่ใช่การทดสอบที่เชื่อถือได้อีกต่อไป

เพื่อตอบโต้สิ่งนี้เมื่อปีที่แล้วเราได้พัฒนาแบ็กเอนด์การวิเคราะห์ความเสี่ยงขั้นสูงสำหรับ reCAPTCHA ซึ่งจะพิจารณาการมีส่วนร่วมทั้งหมดของผู้ใช้กับ CAPTCHA ก่อนระหว่างและหลังเพื่อพิจารณาว่าผู้ใช้นั้นเป็นมนุษย์หรือไม่ วิธีนี้ทำให้เราพึ่งพาการพิมพ์ข้อความที่ผิดเพี้ยนน้อยลงและในทางกลับกันก็มอบประสบการณ์ที่ดีขึ้นให้กับผู้ใช้ เราพูดถึงเรื่องนี้ในโพสต์วันวาเลนไทน์เมื่อต้นปีนี้

หากคุณสามารถปรับแต่งรูปแบบขององค์ประกอบการควบคุมได้โดยตรงคุณสามารถแทรกแซงตรรกะการสร้างโปรไฟล์ผู้ใช้ที่ทำให้ reCAPTCHA ใหม่เป็นไปได้

แล้วธีมที่กำหนดเองล่ะ:

ตอนนี้ใหม่ API จะนำเสนอthemeตัวเลือกโดยที่คุณสามารถเลือกรูปแบบที่กำหนดไว้ล่วงหน้าเช่นและlight darkอย่างไรก็ตามในปัจจุบันไม่มีวิธีสร้างธีมแบบกำหนดเอง หากเราตรวจสอบiframeเราจะพบว่าthemeมีการส่งชื่อในสตริงการสืบค้นของsrcแอตทริบิวต์ URL นี้มีลักษณะดังต่อไปนี้

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

พารามิเตอร์นี้กำหนดชื่อคลาส CSS ที่ใช้กับองค์ประกอบ wrapper ในiframeและกำหนดธีมที่ตั้งไว้ล่วงหน้าที่จะใช้

ขุดผ่านแหล่ง minified ผมพบว่ามีจริง 4 ค่ารูปแบบที่ถูกต้องซึ่งเป็นมากกว่า 2 ระบุไว้ในเอกสาร แต่defaultและเป็นเช่นเดียวกับstandardlight

เราสามารถดูรหัสที่เลือกชื่อคลาสจากออบเจ็กต์นี้ได้ที่นี่

ไม่มีรหัสสำหรับธีมที่กำหนดเองและหากthemeมีการระบุค่าอื่น ๆก็จะใช้standardธีมนั้น

สรุปแล้ว:

ในปัจจุบันไม่มีวิธีใดที่จะจัดรูปแบบองค์ประกอบ reCAPTCHA ใหม่ได้ทั้งหมดมีเพียงองค์ประกอบของ wrapper รอบ ๆ เท่านั้นที่iframeสามารถทำสไตล์ได้ สิ่งนี้เกือบจะทำโดยเจตนาเพื่อป้องกันไม่ให้ผู้ใช้ทำลายตรรกะการทำโปรไฟล์ผู้ใช้ซึ่งทำให้ช่องทำเครื่องหมายที่ไม่มีแคปต์ชาใหม่เป็นไปได้ เป็นไปได้ว่า Google สามารถใช้ API ธีมที่กำหนดเองแบบ จำกัด ได้บางทีอาจช่วยให้คุณสามารถเลือกสีที่กำหนดเองสำหรับองค์ประกอบที่มีอยู่ได้ แต่ฉันไม่คิดว่า Google จะใช้สไตล์ CSS แบบเต็ม

ดังที่กล่าวมาข้างต้นไม่มีทาง ATM แต่ถ้าใครสนใจก็เพิ่มแค่สองบรรทัดอย่างน้อยคุณก็สามารถทำให้มันดูสมเหตุสมผลได้ถ้ามันแตกบนหน้าจอใด ๆ คุณสามารถกำหนดค่าที่แตกต่างกันในแบบสอบถาม @media

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

หวังว่านี่จะช่วยทุกคน :-)

น่าเสียดายที่เราไม่สามารถจัดรูปแบบ reCaptcha v2 ได้ แต่เป็นไปได้ที่จะทำให้ดูดีขึ้นนี่คือรหัส:

คลิกที่นี่เพื่อดูตัวอย่าง

.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>

เพิ่มคุณสมบัติขนาดข้อมูลลงในองค์ประกอบ google recaptcha และทำให้เท่ากับ "กะทัดรัด" ในกรณีของอุปกรณ์เคลื่อนที่

อ้างถึง: google recaptcha docs

ฉันใช้เคล็ดลับด้านล่างเพื่อทำให้ตอบสนองและลบเส้นขอบ เทคนิคนี้อาจซ่อนข้อความ / ข้อผิดพลาดของ recaptcha

สไตล์นี้มีไว้สำหรับ rtl lang แต่คุณสามารถเปลี่ยนได้ง่าย

.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>

สิ่งที่ทำได้คือซ่อนการควบคุม ReCaptcha ไว้ด้านหลัง div จากนั้นจัดแต่งทรงผมของคุณใน div นี้ และตั้งค่า css "pointer-events: none" เพื่อให้คุณสามารถคลิกผ่าน div ( คลิกผ่าน DIV ไปยังองค์ประกอบที่อยู่ข้างใต้ )

ช่องทำเครื่องหมายควรอยู่ในตำแหน่งที่ผู้ใช้คลิก

คุณสามารถสร้างแคปช่าขึ้นมาใหม่ห่อในภาชนะและปล่อยให้ช่องทำเครื่องหมายมองเห็นได้เท่านั้น ปัญหาหลักของฉันคือฉันไม่สามารถใช้ความกว้างเต็มได้ดังนั้นตอนนี้มันจึงขยายเป็นความกว้างของคอนเทนเนอร์ ปัญหาเดียวคือการหมดอายุคุณสามารถเห็นการสะบัด แต่ทันทีที่เกิดขึ้นฉันรีเซ็ต

ดูการสาธิตนี้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>

เยี่ยมมาก! ตอนนี้มีการจัดแต่งทรงผมสำหรับ reCaptcha แล้ว .. ฉันแค่ใช้สไตล์อินไลน์เช่น:

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

สิ่งที่คุณต้องการปรับแต่งเล็ก ๆ ในสไตล์อินไลน์ ...

หวังว่ามันจะช่วยคุณได้ !!

เพียงเพิ่มโซลูชันแฮ็คเพื่อให้ตอบสนอง

ห่อ recaptcha ใน div พิเศษ:

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

เพิ่มสไตล์ ถือว่าเป็นธีมสีเข้ม

// 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;
}

สิ่งนี้ให้ผลดังต่อไปนี้:

ตอนนี้จะปรับขนาดในแนวนอนและไม่มีเส้นขอบ โลโก้ recaptcha จะถูกตัดออกทางด้านขวาดังนั้นฉันจึงซ่อนมันด้วยเส้นขอบด้านขวา นอกจากนี้ยังซ่อนลิงก์ความเป็นส่วนตัวและข้อกำหนดดังนั้นคุณอาจต้องการเพิ่มกลับเข้าไป

ฉันพยายามตั้งค่าความสูงขององค์ประกอบกระดาษห่อหุ้มจากนั้นให้จัดกึ่งกลางแนวตั้งของ recaptcha เพื่อลดความสูง น่าเสียดายที่คำสั่งผสมล้น: ซ่อนอยู่และความสูงที่น้อยกว่าดูเหมือนจะฆ่า iframe

ใน V2.0 ไม่สามารถทำได้ iframe จะบล็อกสไตล์ทั้งหมดจากสิ่งนี้ เป็นการยากที่จะเพิ่มธีมที่กำหนดเองแทนที่จะเป็นธีมสีเข้มหรือสีอ่อน

ด้วยการรวม reCAPTCHA ที่มองไม่เห็นคุณสามารถทำสิ่งต่อไปนี้:

หากต้องการเปิดใช้งาน reCAPTCHA ที่มองไม่เห็นแทนที่จะใส่พารามิเตอร์ใน div คุณสามารถเพิ่มพารามิเตอร์เหล่านี้ลงในปุ่ม html ได้โดยตรง

ก. data-callback =”” ใช้งานได้เหมือนกับช่องทำเครื่องหมาย captcha แต่จำเป็นสำหรับการมองไม่เห็น

ข. ป้ายข้อมูล: ช่วยให้คุณสามารถเปลี่ยนตำแหน่งตรา reCAPTCHA ได้ (เช่นโลโก้และข้อความ 'ป้องกันโดย reCAPTCHA') ตัวเลือกที่ใช้ได้คือ "bottomright" (ค่าเริ่มต้น) "bottomleft" หรือ "inline" ซึ่งจะทำให้ป้ายกำกับอยู่เหนือปุ่มโดยตรง หากคุณสร้างป้ายแบบอินไลน์คุณจะควบคุม CSS ของป้ายได้โดยตรง

ในกรณีที่มีคนกำลังดิ้นรนกับ recaptcha ของแบบฟอร์มการติดต่อ 7 (wordpress) นี่เป็นวิธีแก้ปัญหาที่เหมาะกับฉัน

.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;
}

สายไปงานปาร์ตี้ แต่บางทีทางออกของฉันอาจช่วยใครสักคนได้

ฉันไม่พบวิธีแก้ปัญหาใด ๆ ที่ใช้งานได้บนเว็บไซต์ที่ตอบสนองเมื่อวิวพอร์ตเปลี่ยนไปหรือเค้าโครงลื่น

ฉันจึงสร้างสคริปต์ jQuery สำหรับ django-cms ที่ปรับให้เข้ากับวิวพอร์ตที่เปลี่ยนแปลงแบบไดนามิก ฉันจะอัปเดตการตอบกลับนี้ทันทีที่ฉันต้องการตัวแปรที่ทันสมัยซึ่งเป็นแบบแยกส่วนมากกว่าและไม่มีการพึ่งพา 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;

หากยังมีคนสนใจมีไลบรารี javascript แบบธรรมดา (ไม่มีการพึ่งพา jQuery) ชื่อ custom recaptcha ช่วยให้คุณปรับแต่งปุ่มด้วย css และใช้เหตุการณ์ js บางอย่าง (พร้อม / ตรวจสอบ) แนวคิดคือการทำให้ recaptcha เริ่มต้น "มองไม่เห็น" และวางปุ่มไว้เหนือมัน เพียงแค่เปลี่ยน id ของ recaptcha เท่านี้ก็เสร็จเรียบร้อย

<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>

ดูhttps://azentreprise.org/read.php?id=1สำหรับข้อมูลเพิ่มเติม

ฉันเพิ่งเพิ่มวิธีแก้ปัญหา / การแก้ไขด่วนประเภทนี้เพื่อไม่ให้สูญหายในกรณีที่ลิงก์เสีย

ลิงก์ไปยังโซลูชันนี้"ต้องการเพิ่มลิงก์วิธีการปรับขนาด Google noCAPTCHA reCAPTCHA | The Geek Goddess"  จัดทำโดยVikram Singh Sainiและเพียงแค่สรุปว่าคุณสามารถใช้ CSS แบบอินไลน์เพื่อบังคับใช้กรอบของ 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>

คุณยังสามารถเลือกระหว่างธีม ReCaptcha สีเข้มหรือสีอ่อน ฉันใช้สิ่งนี้ในแอพ Angular 8 ตัวหนึ่งของฉัน

ฉันเจอคำตอบนี้โดยพยายามจัดรูปแบบ ReCaptcha v2 สำหรับไซต์ที่มีโหมดสว่างและมืด เล่นรอบบางมากขึ้นและพบว่านอกจากtransform, filterถูกนำไปใช้ยังรวมถึงiframeองค์ประกอบที่สิ้นสุดวันที่เพื่อใช้เป็นค่าเริ่มต้น / แสง reCAPTCHA และการทำเช่นนี้เมื่อผู้ใช้อยู่ในโหมดมืด:

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

hue-rotate(180deg)ทำให้มันเพื่อให้โลโก้ยังคงเป็นสีฟ้าและเครื่องหมายยังคงเป็นสีเขียวเมื่อผู้ใช้คลิกมันขณะที่การรักษาสีขาวinvert()'เอ็ดสีดำและในทางกลับกัน

ไม่เห็นสิ่งนี้ในคำตอบหรือความคิดเห็นใด ๆ ดังนั้นจึงตัดสินใจแบ่งปันแม้ว่านี่จะเป็นกระทู้เก่าก็ตาม

คุณสามารถใช้ CSS บางส่วนสำหรับGoogle reCAPTCHA v2สไตล์บนเว็บไซต์ของคุณ:

- เปลี่ยนพื้นหลังสีของวิดเจ็ต Google reCAPTCHA v2:

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

หรือ

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

- ปรับขนาดวิดเจ็ต Google reCAPTCHA v2 โดยใช้ตัวอย่างข้อมูลนี้:

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

- ตอบสนอง Google reCAPTCHA v2 ของคุณ:

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

องค์ประกอบทั้งหมดคุณสมบัติของ CSS ด้านบนเป็นเพียงการอ้างอิงของคุณ คุณสามารถเปลี่ยนแปลงได้ด้วยตัวเอง (โดยใช้ตัวเลือกคลาส CSS เท่านั้น)

ดู OIW Blog - วิธีแก้ไข CSS ของ Google reCAPTCHA (Re-style, Change Position, Resize reCAPTCHA Badge)

คุณยังสามารถดูรูปแบบของ Google reCAPTCHA v3 ได้ที่นั่น