ReCaptcha API v2 स्टाइलिंग

Question

मुझे Google की नई पुनरावृत्ति (v2) की शैली को खोजने में अधिक सफलता नहीं मिली है। अंतिम लक्ष्य इसे उत्तरदायी बनाना है, लेकिन मुझे चौड़ाई जैसी सरल चीजों के लिए भी स्टाइल लगाने में कठिनाई हो रही है।

उनके एपीआई प्रलेखन विषय पैरामीटर के अलावा अन्य सभी पर स्टाइल को नियंत्रित करने के बारे में कोई विवरण देने के लिए प्रकट नहीं होता है , और सरल सीएसएस और जावास्क्रिप्ट समाधान ने मेरे लिए काम नहीं किया है।

मूल रूप से, मुझे CSS को Google के नए संस्करण reCaptcha पर लागू करने में सक्षम होना चाहिए। इसके साथ जावास्क्रिप्ट का उपयोग करना स्वीकार्य है।

Comments

मेरे पास एक ही सफलता है :(

— पेट्रॉफ

Google के नए v2 reCaptcha में कस्टम CSS लागू करने में सक्षम होने के नाते, यह पिछले दिसंबर में ही जारी किया गया था, और यह सभी आधुनिक डेस्कटॉप और मोबाइल ब्राउज़रों में काम करता है (और IE8 भले ही यह कुछ हैक हो)।

— एलेक्स बेयर्डले

@skobaljic कृपया मेरी उपरोक्त टिप्पणी देखें। इस प्रश्न का बिंदु किसी भी स्टाइल, अवधि को कैसे लागू किया जाए, इस पर सभी डेवलपर्स के लिए एक उत्तर प्राप्त करना है। जवाबदारी के संबंध में कुछ भी नहीं।

— एलेक्स बेयर्डस्ले

यहाँ समस्या को दिखाते हुए एक बेला है। jsfiddle.net/slicedtoad/GVwZ4/4 मूल रूप से, कैप्चा एक क्रॉस-डोमेन iframe में है, इसे css या js के साथ स्टाइल नहीं किया जा सकता है। और एपीआई रेफरी यह नहीं समझाता है कि कस्टम थीम कैसे बनाई जाती है। चाहे कोई हैकी समाधान मौजूद हो, यह संभवत: इश्यू ट्रैकर में प्रस्तुत किया जाना चाहिए।

— डैनियल

@AlexBeardsley लेकिन एकल-उत्पत्ति-नीति, जो कि iframe संपादन को अवरुद्ध करने के लिए जिम्मेदार है, उपयोगकर्ताओं की सुरक्षा के लिए एक ब्राउज़र सुरक्षा उपाय है । इसे बंद करना काफी आसान है। और यदि आप एक बॉट थे, तो आप पहली बार में एक ब्राउज़र का उपयोग नहीं करेंगे।

— डेनियल

Answer 1

अवलोकन:

बुरी खबरों के उत्तर देने वाले के लिए क्षमा करें, लेकिन शोध और डिबगिंग के बाद, यह बहुत स्पष्ट है कि नए reCAPTCHA नियंत्रणों की स्टाइल को अनुकूलित करने का कोई तरीका नहीं है। नियंत्रण एक में लिपटे हैं iframe, जो सीएसएस का उपयोग उन्हें स्टाइल करने से रोकता है , और समान-उत्पत्ति नीति जावास्क्रिप्ट को सामग्री तक पहुंचने से रोकती है, यहां तक ​​कि हैकी समाधान भी।

क्यों नहीं एपीआई को अनुकूलित करें?

ReCAPTCHA API संस्करण 1.0 के विपरीत , API संस्करण 2.0 में कोई अनुकूलित विकल्प नहीं हैं । अगर हम विचार करें कि यह नया एपीआई कैसे काम करता है, तो इसमें कोई आश्चर्य की बात नहीं है।

यहां से उद्धरण आप एक रोबोट हैं? पेश है “कोई कैप्चा नहीं” :

जबकि नया reCAPTCHA एपीआई सरल लग सकता है, उस मामूली चेकबॉक्स के पीछे उच्च स्तर का परिष्कार है। CAPTCHAs ने लंबे समय तक विकृत पाठ को हल करने में रोबोट की अक्षमता पर भरोसा किया है। हालांकि, हमारे शोध ने हाल ही में दिखाया कि आज की आर्टिफिशियल इंटेलिजेंस तकनीक 99.8% सटीकता पर विकृत पाठ के सबसे कठिन संस्करण को भी हल कर सकती है। इस प्रकार विकृत पाठ, अपने दम पर, अब एक भरोसेमंद परीक्षण नहीं है।

इसका मुकाबला करने के लिए, पिछले साल हमने reCAPTCHA के लिए एक उन्नत जोखिम विश्लेषण बैकएंड विकसित किया है जो सक्रिय रूप से CAPTCHA के साथ उपयोगकर्ता के संपूर्ण जुड़ाव पर विचार करता है — इससे पहले, दौरान और बाद में यह निर्धारित करने के लिए कि क्या वह मानव है। यह हमें विकृत पाठ लिखने पर कम भरोसा करने में सक्षम बनाता है और बदले में, उपयोगकर्ताओं के लिए एक बेहतर अनुभव प्रदान करता है। हमने इस साल की शुरुआत में अपने वेलेंटाइन डे पोस्ट में इस बारे में बात की थी।

यदि आप नियंत्रण तत्वों की स्टाइलिंग में सीधे हेरफेर करने में सक्षम थे, तो आप आसानी से उपयोगकर्ता-प्रोफाइलिंग तर्क के साथ हस्तक्षेप कर सकते थे जो नए reCAPTCHA को संभव बनाता है।

एक कस्टम विषय के बारे में क्या?:

अब नया एपीआई एक themeविकल्प प्रदान करता है , जिसके द्वारा आप एक प्रीसेट थीम चुन सकते हैं जैसे lightऔर dark। हालाँकि वर्तमान में कस्टम थीम बनाने का कोई तरीका नहीं है। यदि हम निरीक्षण करते हैं iframe, तो हम पाएंगे कि themeनाम को srcविशेषता के क्वेरी स्ट्रिंग में पारित किया गया है । यह URL निम्नलिखित की तरह दिखता है।

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

यह पैरामीटर निर्धारित करता है कि सीएसएस श्रेणी का नाम रैपर तत्व में किसके लिए उपयोग किया जाता है iframeऔर उपयोग करने के लिए पूर्व निर्धारित विषय निर्धारित करता है।

न्यूनतम किया गया स्रोत के माध्यम से खुदाई, मैंने पाया वहाँ वास्तव में 4 मान्य विषय मूल्यों हैं कि, जो 2 दस्तावेज़ में सूचीबद्ध की तुलना में अधिक है, लेकिन defaultऔर standardजैसे ही हैं light।

हम इस ऑब्जेक्ट से क्लास का नाम चुनने वाले कोड को यहाँ देख सकते हैं।

कस्टम थीम के लिए कोई कोड नहीं है, और यदि कोई अन्य themeमान निर्दिष्ट है, तो यह standardथीम का उपयोग करेगा ।

निष्कर्ष के तौर पर:

वर्तमान में, नए reCAPTCHA तत्वों को पूरी तरह से स्टाइल करने का कोई तरीका नहीं है, केवल कैन के आसपास के आवरण के तत्वों iframeको स्टाइल किया जा सकता है। यह लगभग निश्चित रूप से जानबूझकर किया गया था, ताकि उपयोगकर्ताओं को उपयोगकर्ता प्रोफाइलिंग तर्क को तोड़ने से रोका जा सके जो नए कैप्चा-फ्री चेकबॉक्स को संभव बनाता है। यह संभव है कि Google एक सीमित कस्टम थीम एपीआई लागू कर सकता है, शायद आपको मौजूदा तत्वों के लिए कस्टम रंग चुनने की अनुमति दे, लेकिन मुझे उम्मीद नहीं होगी कि Google पूर्ण सीएसएस स्टाइल लागू कर सकता है।

Comments

जो यह पुष्टि करता रहा अलेक्जेंडर क्या मिला ... नई reCAPTCHA के साथ मेरी प्रारंभिक निराशा था, लेकिन ऐसा लगता है कि वहाँ सिर्फ चारों ओर है कि वर्तमान में :( एक तरीका नहीं है

— jhawes

लिंक जोड़ना चाहते हैं Google noCAPTCHA का आकार कैसे बदलें reCAPTCHA | गीक देवी , जहां लेखक ने कैप्चा v2 को उत्तरदायी बनाने की चाल साझा की।

— विक्रम सिंह सैनी

कम से कम पृष्ठभूमि और पाठ रंग निर्दिष्ट करने का एक तरीका होना अच्छा होगा,

— My1

विषयों के लिए आगे। आप ऑन-कॉलबैक में विषय का अनुरोध कर सकते हैं: <script type = "text / javascript"> var onloadCallback = function () {grecaptcha.render ('your_recaptcha_div_id, {' sitekey ':' your_site_key ', theme:' dark '<=> ==========================); }; </ script>

— आएगा

Answer 2

जैसा कि ऊपर उल्लेख किया गया है, लोगों के पास एटीएम नहीं है। लेकिन फिर भी अगर किसी को दिलचस्पी है, तो सिर्फ दो लाइनों में जोड़कर आप कम से कम इसे उचित बना सकते हैं, अगर यह किसी भी स्क्रीन पर टूट जाता है। आप @ मूल्य क्वेरी में भिन्न मान निर्दिष्ट कर सकते हैं।

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

आशा है कि यह किसी को भी मदद करता है :-)।

Comments

आप अपने विशेष लेआउट के लिए जो भी सबसे अच्छा लग रहा है, उसके पैमाने को समायोजित कर सकते हैं। ट्रांसफ़ॉर्म-ओरिजिन प्रॉपर्टी को इसलिए जोड़ा जाता है क्योंकि जब आप ट्रांसफ़ॉर्म प्रॉपर्टी का इस्तेमाल करते हैं, तो यह एलिमेंट द्वारा उठाए गए वास्तविक स्पेस को नहीं बदलता है। यह दिखाने का सिर्फ एक मूल तरीका है कि आप इनलाइन स्टाइल के साथ reCAPTCHA के आकार को जल्दी से कैसे बदल सकते हैं। कुछ अच्छे लोगों के लिए, मैं एक नया वर्ग निर्दिष्ट करने और इसे मोबाइल के ऊपर किसी भी चीज़ के लिए पूर्ण आकार में छोड़ने का सुझाव दूंगा, फिर इसे छोटे आकार में बदलने के लिए मीडिया क्वेरी का उपयोग करूंगा। जब आप मोबाइल पर जाते हैं तो संक्रमण प्रभाव का उपयोग करना बेहतर होता है, इसलिए यह नेत्रहीन "सिकुड़ जाता है"।

— ग्रे आइर

आप ब्राउज़र विशिष्ट नियमों का उपयोग करना चाहते हैं, क्योंकि iphones 5 केवल "ट्रांसफ़ॉर्म" को नहीं पहचानता है: ऐसा लगता है: -ms-ट्रांस्फ़ॉर्मेशन: स्केल (0.815); -वेबकैट-ट्रांसफॉर्म: स्केल (0.815); -मोज़-ट्रांसफ़ॉर्म: स्केल (0.815); -ओ-परिवर्तन: स्केल (0.815); परिवर्तन: स्केल (0.815); -ms-transform-Origin: बाएँ शीर्ष; -वेबकिट-ट्रांसफॉर्म-मूल: बाएं शीर्ष; -मोज़-ट्रांसफॉर्म-ओरिजिन: लेफ्ट टॉप; -ओ-परिवर्तन-मूल: बाएं शीर्ष; परिवर्तन-उत्पत्ति: बाएँ शीर्ष;

— ग्रे आइर

Answer 3

दुर्भाग्य से हम कठपुतली शैली को फिर से वी 2 नहीं कर सकते हैं, लेकिन इसे बेहतर बनाना संभव है, यहां कोड है:

पूर्वावलोकन करने के लिए यहां क्लिक करें

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

Comments

गैर-जेएस ब्राउज़र वाले मोबाइल उपयोगकर्ताओं के लिए फ़ॉलबैक रिकैप्चा आइफ्रेम पर लागू नहीं होता है।

— andreszs

Answer 4

Google recaptcha एलिमेंट में एक डेटा-साइज़ प्रॉपर्टी जोड़ें और इसे मोबाइल के मामले में "कॉम्पैक्ट" के बराबर बनाएं।

संदर्भ: Google पुनरावृत्ति डॉक्स

Answer 5

मैं इसे उत्तरदायी बनाने और सीमाओं को हटाने के लिए नीचे दिए गए ट्रिक का उपयोग करता हूं। यह तरकीब शायद पुनरावृत्ति संदेश / त्रुटि छिपा सकती है।

यह शैली आरटीएल लैंग के लिए है लेकिन आप इसे आसानी से बदल सकते हैं।

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

Answer 6

आप क्या कर सकते हैं एक div के पीछे ReCaptcha नियंत्रण को छिपाने के लिए है। फिर इस डीवा पर अपना स्टाइल बनाएं। और उस पर css "पॉइंटर-ईवेंट्स: कोई नहीं" सेट करें, ताकि आप div के माध्यम से क्लिक कर सकें ( अंतर्निहित तत्वों के लिए एक DIV के माध्यम से क्लिक करें )।

चेकबॉक्स उस जगह पर होना चाहिए जहां उपयोगकर्ता क्लिक कर रहा है।

Answer 7

आप पुनरावृत्ति को फिर से बना सकते हैं, इसे एक कंटेनर में लपेट सकते हैं और केवल चेकबॉक्स को दिखाई दे सकते हैं। मेरी मुख्य समस्या यह थी कि मैं पूरी चौड़ाई नहीं ले सकता था इसलिए अब यह कंटेनर की चौड़ाई तक फैल गया। एकमात्र समस्या यह है कि समाप्ति आप एक झटका देख सकते हैं लेकिन जैसे ही यह होता है मैं इसे रीसेट करता हूं।

इस डेमो को देखें 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>

Comments

आपका लिंक टूट गया है

— नवीन

जाहिर तौर पर कोडपेन ने मेरी सहमति के बिना इसे हटा दिया। यकीन नहीं होता कि यह एक कोडपेन / Google नीति का उल्लंघन कर सकता है।

— ऐलेजैंड्रो

Answer 8

महान! अब यहाँ पर reCaptcha के लिए स्टाइल उपलब्ध है .. मैं जैसे इनलाइन स्टाइल का उपयोग करता हूँ:

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

जो भी आप इनलाइन स्टाइलिंग में छोटे कस्टमाइज़ करना चाहते हैं ...

आशा है इससे आपकी मदद होगी!!

Answer 9

बस इसे उत्तरदायी बनाने के लिए एक हैक-ईश समाधान जोड़ना।

एक अतिरिक्त 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;
}

यह निम्नलिखित पैदावार देता है:

अब यह क्षैतिज रूप से आकार परिवर्तन करेगा, और इसमें सीमा नहीं होगी। रिकैप्टा लोगो दाईं ओर कट जाता है, इसलिए मैं इसे बॉर्डर-राइट के साथ छिपा रहा हूं। यह गोपनीयता और शर्तों के लिंक को भी छिपा रहा है, इसलिए आप इसे वापस जोड़ना चाह सकते हैं।

मैंने रैपर तत्व पर एक ऊंचाई निर्धारित करने का प्रयास किया, और फिर ऊंचाई को कम करने के लिए पुनरावृत्ति को लंबवत रूप से केंद्र में रखा। दुर्भाग्य से, अतिप्रवाह के किसी भी कॉम्बो: छिपी हुई और एक छोटी ऊंचाई, आइफ्रेम को मारने के लिए लगता है।

Comments

बस अपनी शैली की कोशिश की, मेरे लिए काम करने के लिए नहीं लगता है। -> jsfiddle.net/GVwZ4/31

— My1

Answer 10

V2.0 में यह संभव नहीं है। आइफ्रेम इस से बाहर सभी स्टाइल को अवरुद्ध करता है। अंधेरे या प्रकाश एक के बजाय एक कस्टम विषय जोड़ना मुश्किल है।

Answer 11

अदृश्य reCAPTCHA के एकीकरण के साथ आप निम्नलिखित कार्य कर सकते हैं:

अदृश्य reCAPTCHA को सक्षम करने के लिए, मापदंडों को एक div में रखने के बजाय, आप उन्हें सीधे html बटन में जोड़ सकते हैं।

ए। डेटा-कॉलबैक = ""। यह चेकबॉक्स कैप्चा की तरह ही काम करता है, लेकिन अदृश्य के लिए आवश्यक है।

ख। data-badge: यह आपको reCAPTCHA बैज (यानी लोगो और 'reCAPTCHA' टेक्स्ट द्वारा संरक्षित) को रिपोज करने की अनुमति देता है। वैध विकल्प के रूप में 'नीचे' (डिफ़ॉल्ट), 'नीचे' या 'इनलाइन' जो बिल्ला को सीधे बटन के ऊपर रख देगा। यदि आप बैज इनलाइन बनाते हैं, तो आप बैज के सीएसएस को सीधे नियंत्रित कर सकते हैं।

Comments

बैज इनलाइन बनाते समय बैज के सीएसएस को सीधे कैसे नियंत्रित करें?

— जियानक्सिन गाओ

Answer 12

यदि कोई व्यक्ति संपर्क फ़ॉर्म 7 (वर्डप्रेस) के पुनरावृत्ति से जूझ रहा है तो मेरे लिए एक समाधान है

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

Answer 13

पार्टी के लिए देर से, लेकिन शायद मेरे समाधान से किसी को मदद मिलेगी।

जब व्यूपोर्ट बदल जाता है या लेआउट फ्लुइड होता है तो मुझे ऐसा कोई समाधान नहीं मिला है जो एक उत्तरदायी वेबसाइट पर काम करता हो।

इसलिए मैंने django-cms के लिए एक jQuery स्क्रिप्ट बनाई है जो गतिशील रूप से एक बदलते व्यूपोर्ट के लिए अनुकूल है। जैसे ही मुझे इसकी आधुनिक संस्करण की आवश्यकता है, जो कि अधिक मॉड्यूलर है और इसकी कोई jQuery निर्भरता नहीं है, मैं इस प्रतिक्रिया को अपडेट करने जा रहा हूं।

एचटीएमएल

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

सीएसएस

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

Answer 14

यदि कोई अभी भी इच्छुक है, तो एक साधारण जावास्क्रिप्ट लाइब्रेरी (कोई jQuery निर्भरता) नहीं है, जिसका नाम कस्टम रिकैप्टा है। यह आपको सीएसएस के साथ बटन को कस्टमाइज़ करने और कुछ js ईवेंट्स (रेडी / चेक) लागू करने की सुविधा देता है। डिफ़ॉल्ट पुनरावृत्ति को "अदृश्य" बनाने और उस पर एक बटन लगाने का विचार है। बस 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 देखें ।

Answer 15

मैं सिर्फ इस तरह का समाधान / त्वरित सुधार जोड़ रहा हूं ताकि यह टूटी हुई कड़ी के मामले में खो न जाए।

इस समाधान का लिंक "लिंक जोड़ना चाहते हैं। Google noCAPTCHA का आकार बदलने के लिए कैसे करें। गीक देवी" विक्रम सिंह सैनी  द्वारा प्रदान की गई थी और बस रेखांकित करती है कि आप इनलाइन सीएसएस का उपयोग कर सकते हैं आइफ्रेम का फ्रेमिंग।

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

Answer 16

आप एक अंधेरे या हल्के ReCaptcha विषय के बीच चयन कर सकते हैं । मैंने अपने एंगुलर 8 ऐप्स में से एक में इसका इस्तेमाल किया था

Answer 17

मैं इस उत्तर को एक ऐसी साइट के लिए ReCaptcha v2 को स्टाइल करने की कोशिश कर रहा था जिसमें एक प्रकाश और एक अंधेरे मोड है। कुछ और के आसपास खेला गया और पता चला कि इसके अलावा transform, filterउन iframeतत्वों पर भी लागू किया जाता है जो डिफ़ॉल्ट / प्रकाश ReCaptcha का उपयोग कर समाप्त हो जाते हैं और ऐसा तब करते हैं जब उपयोगकर्ता अंधेरे मोड में होता है:

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

hue-rotate(180deg)यह इतना है कि लोगो को अभी भी नीला है और चेक-निशान जब उपयोगकर्ता उस पर क्लिक करेगा, जबकि सफेद रखने अभी भी हरा है बनाता invert()विपरीत काले और इसके लिए 'एड।

यह किसी भी उत्तर या टिप्पणी में नहीं देखा था, तो साझा करने का फैसला किया भले ही यह एक पुराना धागा हो।

Answer 18

आप अपनी वेबसाइट पर Google reCAPTCHA v2 स्टाइलिंग के लिए कुछ CSS का उपयोग कर सकते हैं :

- पृष्ठभूमि बदलें, 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 की संपत्ति जो आपके संदर्भ के लिए है। आप उन्हें अपने आप से बदल सकते हैं (केवल सीएसएस वर्ग चयनकर्ता का उपयोग करके)।

OIW ब्लॉग पर संदर्भ लें - Google के CSS को कैसे संपादित करें reCAPTCHA (पुन: शैली, स्थान बदलें, reCAPTCHA बैज का आकार बदलें)

आप Google reCAPTCHA v3 की स्टाइलिंग का भी पता लगा सकते हैं।

Comments

सीएसएस केवल एक ही दस्तावेज़ के भीतर स्कूप किया गया है। एक iframe अपने आप में एक संपूर्ण दस्तावेज़ है, और इसलिए एक CSS नियम जो उस पृष्ठ पर लागू होता है, जिसमें iframe उस iframe के भीतर वाले पृष्ठ पर लागू नहीं हो सकता है।

— सैंड्स