ReCaptcha API v2 স্টাইলিং

Question

গুগলের নতুন রিক্যাপচা (ভি 2) কীভাবে স্টাইল করা যায় সে সম্পর্কে আমার তেমন সাফল্য হয়নি। চূড়ান্ত লক্ষ্য এটিকে প্রতিক্রিয়াশীল করা, তবে প্রস্থের মতো সাধারণ জিনিসগুলির জন্য স্টাইলিং প্রয়োগ করতে আমার অসুবিধা হচ্ছে।

তাদের এপিআই ডকুমেন্টেশন থিমের প্যারামিটার ব্যতীত অন্য কীভাবে স্টাইলিং নিয়ন্ত্রণ করতে পারে সে সম্পর্কে কোনও নির্দিষ্ট বিবরণ দেবে বলে মনে হয় না এবং সহজ সিএসএস এবং জাভাস্ক্রিপ্ট সমাধানগুলি আমার পক্ষে কাজ করে নি।

মূলত, আমার গুগলের নতুন পুনর্নির্মাণ সংস্করণে সিএসএস প্রয়োগ করতে সক্ষম হওয়া দরকার। এটির সাথে জাভাস্ক্রিপ্ট ব্যবহার করা গ্রহণযোগ্য।

Comments

আমার একই সাফল্য রয়েছে :(

— পেট্রফ

গুগলের নতুন ভি 2 রিপ্যাচচায় কাস্টম সিএসএস প্রয়োগ করতে সক্ষম হচ্ছেন, এই গত ডিসেম্বরে প্রকাশিত হয়েছে এবং এটি সমস্ত আধুনিক ডেস্কটপ এবং মোবাইল ব্রাউজারগুলিতে (এবং আইই 8 কিছুটা হ্যাক হলেও) কাজ করে।

— অ্যালেক্স বিয়ার্ডসলে

@ স্পোবালজিক দয়া করে আমার উপরের মন্তব্যটি দেখুন। এই প্রশ্নের মূল বিষয়টি হল যে কোনও বিকাশকারী কীভাবে স্টাইলিং, পিরিয়ড প্রয়োগ করা যায় সে সম্পর্কে সমস্ত বিকাশকারীদের জন্য একটি উত্তর পাওয়া। প্রতিক্রিয়াশীলতা সম্পর্কিত কিছুই নয়।

— অ্যালেক্স বিয়ার্ডসলে

সমস্যাটি দেখায় এমন একটি বেহালতা এখানে। jsfiddle.net/slicedtoad/GVwZ4/4 মূলত, যেহেতু ক্যাপচা একটি ক্রস-ডোমেন iframe এ রয়েছে, তাই এটি CSS বা js দিয়ে স্টাইল করা যায় না। এবং এপিআই রেফ কীভাবে একটি কাস্টম থিম তৈরি করবেন তা ব্যাখ্যা করে না। হ্যাকি সমাধান বিদ্যমান কিনা তা বিবেচনা না করেই সম্ভবত এটি ইস্যু ট্র্যাকারে জমা দেওয়া উচিত।

— ড্যানিয়েল

@AlexBeardsley কিন্তু একক উত্পত্তি-নীতি আইফ্রেম সম্পাদনা ব্লক জন্য দায়ী রক্ষা করার জন্য একটি ব্রাউজার নিরাপত্তা পরিমাপ ব্যবহারকারীদের । এটি বন্ধ করা বেশ সহজ। এবং আপনি যদি বট হন তবে আপনি প্রথমে কোনও ব্রাউজার ব্যবহার করবেন না।

— ড্যানিয়েল

Answer 1

সংক্ষিপ্ত বিবরণ:

খারাপ খবরের উত্তরদাতা হওয়ার জন্য দুঃখিত, তবে গবেষণা এবং ডিবাগিংয়ের পরে, এটি একেবারে স্পষ্ট যে নতুন রেক্যাপচা নিয়ন্ত্রণগুলির স্টাইলিংটি কাস্টমাইজ করার কোনও উপায় নেই। নিয়ন্ত্রণগুলি একটিতে আবৃত থাকে iframe, যা সেগুলি স্টাইল করতে সিএসএসের ব্যবহারকে বাধা দেয় এবং একই-উত্স নীতি জাভাস্ক্রিপ্টকে বিষয়বস্তু অ্যাক্সেস করা থেকে বিরত রাখে, এমনকি একটি হ্যাকি সমাধানও বাতিল করে দেয়।

কেন কাস্টমাইজ এপিআই নেই ?:

রেক্যাপচা এপিআই সংস্করণ 1.0 এর বিপরীতে , এপিআই সংস্করণ 2.0 তে কোনও কাস্টমাইজ বিকল্প নেই । যদি আমরা এই নতুন এপিআই কীভাবে কাজ করে তা বিবেচনা করি, তবে কেন অবাক হওয়ার কিছু নেই।

আপনি একটি রোবট থেকে উদ্ধৃতি ? "কোন ক্যাপচা রেকটা না" উপস্থাপন করা হচ্ছে :

নতুন রেক্যাপচা এপিআই সহজ শোনার পরেও, সেই বিনয়ী চেকবাক্সের পিছনে একটি উচ্চ ডিগ্রী অবধি রয়েছে। ক্যাপচাগুলি বিকৃত পাঠ্য সমাধানে রোবোটের অক্ষমতা নিয়ে দীর্ঘকাল নির্ভর করে। যাইহোক, আমাদের গবেষণাটি সম্প্রতি দেখিয়েছে যে আজকের কৃত্রিম গোয়েন্দা প্রযুক্তি 99,8% যথার্থতার সাথে বিকৃত পাঠ্যের সবচেয়ে জটিলতম রূপটিও সমাধান করতে পারে। এইভাবে বিকৃত পাঠ্য নিজে থেকে, আর নির্ভরযোগ্য পরীক্ষা নয়।

এটির মোকাবিলা করতে, গত বছর আমরা রিপ্যাচটিএচএর জন্য একটি উন্নত ঝুঁকি বিশ্লেষণ ব্যাকএন্ড ডেভেলপ করেছি যা ব্যবহারকারীর একজন মানুষ কিনা তা নির্ধারণের জন্য - ক্যাপচা-এর সাথে আগে, সময় এবং পরে active ব্যবহারকারীর পুরো ব্যস্ততা সক্রিয়ভাবে বিবেচনা করে। এটি আমাদের বিকৃত পাঠ্য টাইপ করার উপর কম নির্ভর করতে সক্ষম করে এবং ফলস্বরূপ, ব্যবহারকারীদের জন্য আরও ভাল অভিজ্ঞতা সরবরাহ করে। আমরা এই বছরের শুরুতে আমাদের ভালোবাসা দিবসের পোস্টে এ সম্পর্কে কথা বলেছি।

আপনি যদি নিয়ন্ত্রণ উপাদানগুলির স্টাইলিংটি সরাসরি পরিচালনা করতে সক্ষম হন তবে আপনি সহজেই ব্যবহারকারী-প্রোফাইলিং যুক্তিতে হস্তক্ষেপ করতে পারবেন যা নতুন পুনরায় আপত্তিটিকে সম্ভব করে তোলে।

একটি কাস্টম থিম সম্পর্কে কি ?:

এখন নতুন এপিআই একটি themeবিকল্প প্রস্তাব করে , যার মাধ্যমে আপনি প্রিসেট থিম যেমন lightএবং বেছে নিতে পারেন dark। তবে বর্তমানে একটি কাস্টম থিম তৈরির উপায় নেই। আমরা যদি পরিদর্শন করি তবে আমরা iframeখুঁজে পেতে পারি যে themeনামটি গুণকের ক্যোরি স্ট্রিংয়ে পাস হয়েছে src। এই ইউআরএলটি নীচের মত কিছু দেখাচ্ছে।

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

এই প্যারামিটারটি সিএসএস শ্রেণির নামটি মোড়কের উপাদানটিতে কী ব্যবহৃত হয় তা iframeনির্ধারণ করে এবং প্রিমেট থিমটি ব্যবহারের জন্য নির্ধারণ করে।

সংক্ষিপ্ত উত্সটি খনন করে আমি দেখতে পেলাম যে এখানে 4 টি বৈধ থিম মান রয়েছে যা ডকুমেন্টেশনে তালিকাভুক্ত 2 টির চেয়ে বেশি, defaultএবং standardএকই হিসাবে light।

আমরা এই কোডটি এখানে দেখতে পাচ্ছি যা এই বস্তু থেকে শ্রেণীর নাম নির্বাচন করে।

কোনও কাস্টম থিমের জন্য কোনও কোড নেই এবং যদি অন্য কোনও themeমান নির্দিষ্ট করা থাকে তবে এটি standardথিমটি ব্যবহার করবে ।

উপসংহারে:

বর্তমানে, নতুন রেক্যাপচা উপাদানগুলি পুরোপুরি স্টাইল করার কোনও উপায় নেই, কেবল আশেপাশের মোড়কের উপাদানগুলি iframeস্টাইলাইজ করা যেতে পারে। এটি প্রায় অবশ্যই ইচ্ছাকৃতভাবে করা হয়েছিল, যাতে ব্যবহারকারীরা নতুন ক্যাপচা মুক্ত চেকবক্সকে সম্ভব করে তোলে এমন ব্যবহারকারী প্রোফাইল যুক্তি ভঙ্গ করতে না পারে। এটা সম্ভব যে গুগল একটি সীমাবদ্ধ কাস্টম থিম এপিআই বাস্তবায়িত করতে পারে, সম্ভবত আপনাকে বিদ্যমান উপাদানগুলির জন্য কাস্টম রঙ বেছে নেওয়ার অনুমতি দেয়, তবে আমি গুগল সম্পূর্ণ সিএসএস স্টাইলিং প্রয়োগ করার আশা করবো না।

Comments

এটি নিশ্চিত করেছে যে আমি আলেকজান্ডারকে কী পেয়েছি ... এটি নতুন রেক্যাপচা নিয়ে আমার প্রাথমিক হতাশা ছিল, তবে দেখে মনে হচ্ছে এটির ঠিক কোনও উপায় নেই :(

— hawাও

লিঙ্ক যুক্ত করতে চান কীভাবে গুগল নো কেপচা পুনঃআক্টকা | গীক দেবী , যেখানে লেখক ক্যাপচা ভি 2 কে প্রতিক্রিয়াশীল করার কৌশলটি ভাগ করেছেন।

— বিক্রম সিং সায়নী

কমপক্ষে একটি পটভূমি এবং পাঠ্য রঙ নির্দিষ্ট করার

— উপায়টি ভালো লাগবে

থিম থেকে আরও। আপনি অনক্যালব্যাকে থিমটির জন্য অনুরোধ করতে পারেন: <স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট"> var ওভারলোডক্যালব্যাক = ফাংশন () {গ্রিক্যাপচা.রেেন্ডার ('আপনার_রেকাটচ_ডিভ_আইডি', site 'সাইটকি': 'আপনার_সাইট_কি', থিম: 'অন্ধকার' <= ==========================}); }; </script>

— আসুন

Answer 2

উপরে উল্লিখিত ছেলেরা হিসাবে এটিএমের কোনও উপায় নেই। তবে এখনও যদি কেউ আগ্রহী হন, তবে মাত্র দুটি লাইনে যুক্ত করে আপনি কমপক্ষে একে যুক্তিযুক্ত করে তুলতে পারেন, যদি এটি কোনও স্ক্রিনে ভেঙে যায়। আপনি @ মিডিয়া ক্যোয়ারিতে বিভিন্ন মান নির্ধারণ করতে পারেন।

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

আশা করি এটি যে কাউকে সহায়তা করে :-)।

Comments

আপনার নির্দিষ্ট বিন্যাসের জন্য যা ভাল লাগে তার সাথে আপনি স্কেল সামঞ্জস্য করতে পারেন। রূপান্তর-উত্সের সম্পত্তিটি যুক্ত করা হয়েছে কারণ আপনি যখন ট্রান্সফর্ম সম্পত্তিটি ব্যবহার করেন তখন এটি উপাদান দ্বারা গ্রহণ করা আসল স্থান পরিবর্তন করে না। আপনি কীভাবে অনলাইনে ইনলাইন স্টাইলিংয়ের সাহায্যে রেক্যাপ্টা আকার পরিবর্তন করতে পারবেন তা দেখানোর এটি একটি প্রাথমিক উপায়। আরও ভাল কিছু করার জন্য, আমি একটি নতুন ক্লাস বরাদ্দকরণ এবং এটি মোবাইলের উপরের যে কোনও কিছুর জন্য পুরো আকারে রেখে দেওয়ার পরামর্শ দিচ্ছি, তারপরে এটি একটি মিডিয়া কোয়েরি ব্যবহার করে এটি আরও ছোট আকারে পরিবর্তন করতে। আরও উত্তম হ'ল কোনও রূপান্তর প্রভাব ব্যবহার করা উচিত যাতে আপনি মোবাইলে যাওয়ার সময় এটি দৃশ্যত "সঙ্কুচিত হয়"।

— গ্রে আয়ার

আপনি ব্রাউজারটি নির্দিষ্ট নিয়মাবলীও ব্যবহার করতে চাইবেন, কারণ আইফোন 5 কেবল "রূপান্তর" বলে মনে হচ্ছে না:-মেমস-ট্রান্সফর্ম: স্কেল (0.815); -ওয়েবকিট-ট্রান্সফর্ম: স্কেল (0.815); -মুজ-ট্রান্সফর্ম: স্কেল (0.815); -ও-রূপান্তর: স্কেল (0.815); রূপান্তর: স্কেল (0.815); -ms- রূপান্তর-উত্স: বাম শীর্ষ; -webkit- রূপান্তর-উত্স: বাম শীর্ষ; -মুজ-ট্রান্সফর্ম-উত্স: বাম শীর্ষ; -ও-রূপান্তর-উত্স: বাম শীর্ষ; রূপান্তর-উত্স: বাম শীর্ষ;

— গ্রে আয়ার

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

গুগল রিপ্যাক্টা উপাদানটিতে একটি ডেটা-আকারের সম্পত্তি যুক্ত করুন এবং মোবাইলের ক্ষেত্রে এটি "কমপ্যাক্ট" এর সমান করুন।

তথ্যসূত্র : গুগল রিপ্যাপ্টা ডক্স

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

আপনি যা করতে পারেন তা হ'ল একটি ডিভের পিছনে রেক্যাপচা নিয়ন্ত্রণটি লুকিয়ে রাখা। তারপরে এই ডিভের উপর আপনার স্টাইলিং তৈরি করুন। এবং এটিতে সিএসএস "পয়েন্টার-ইভেন্টস: কিছুই নয়" সেট করুন, যাতে আপনি ডিভের মাধ্যমে ক্লিক করতে পারেন ( অন্তর্নিহিত উপাদানগুলিতে একটি ডিআইভির মাধ্যমে ক্লিক করুন )।

চেকবক্সটি এমন জায়গায় থাকা উচিত যেখানে ব্যবহারকারী ক্লিক করছে।

Answer 7

আপনি পুনর্নির্মাণটি পুনরায় তৈরি করতে পারেন, এটি একটি পাত্রে মুড়িয়ে রাখতে পারেন এবং কেবলমাত্র চেকবক্সটি দৃশ্যমান হতে দেয়। আমার প্রধান সমস্যাটি হ'ল আমি পুরো প্রস্থটি নিতে পারিনি তাই এখন এটি ধারক প্রস্থে প্রসারিত। একমাত্র সমস্যা হল মেয়াদোত্তীর্ণ হওয়া আপনি একটি ঝাঁকুনি দেখতে পাচ্ছেন তবে যত তাড়াতাড়ি এটি ঘটে আমি তা পুনরায় সেট করে ফেলি।

এই ডেমোটি দেখুন http://codepen.io/alejandrolchuga/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

আপনার লিঙ্কটি নষ্ট হয়েছে

— নবীনদা

দৃশ্যত কোডেপেন এটি আমার সম্মতি ছাড়াই সরিয়ে ফেলেছেন। এটি কোনও কোডপেন / গুগল নীতি লঙ্ঘন করতে পারে কিনা তা নিশ্চিত নয়।

— আলেজান্দ্রো

Answer 8

গ্রেট! এখন এখানে পুনঃপ্যাপ্টা জন্য স্টাইলিং উপলব্ধ .. আমি কেবল ইনলাইন স্টাইলিং ব্যবহার করি যেমন:

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

আপনি ইনলাইন স্টাইলিংতে ছোট্ট কাস্টমাইজ করতে যা করতে চান ...

আশা করি এটা তোমাকে সাহায্য করবে!!

Answer 9

এটি প্রতিক্রিয়াশীল করতে কেবল একটি হ্যাক-ইশ সমাধান যুক্ত করুন।

অতিরিক্ত ডিভিউতে রিপ্যাপচাকে মুড়িয়ে দিন:

<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

— মাই 1

Answer 10

ভি 2.0 এ এটি সম্ভব নয়। Iframe এর বাইরে সমস্ত স্টাইলিং ব্লক করে। অন্ধকার বা হালকা একটি পরিবর্তে একটি কাস্টম থিম যুক্ত করা কঠিন।

Answer 11

অদৃশ্য 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

পার্টিতে দেরীতে, তবে আমার সমাধানটি কারও সাহায্য করবে।

ভিউপোর্টের পরিবর্তন বা বিন্যাস তরল হয়ে গেলে আমি কোনও প্রতিক্রিয়াশীল ওয়েবসাইটে কাজ করে এমন কোনও সমাধান পাইনি।

তাই আমি জ্যাঙ্গো-সেন্টিমিটারের জন্য একটি jQuery স্ক্রিপ্ট তৈরি করেছি যা পরিবর্তনশীল ভিউপোর্টের সাথে ডায়নামিকভাবে মানিয়ে চলেছে। আমি আরও বেশি মডুলার এবং এর কোনও জিকিউরি নির্ভরতা নেই এর একটি আধুনিক বৈকল্পিকের প্রয়োজন হওয়ার সাথে সাথে আমি এই প্রতিক্রিয়াটি আপডেট করতে যাচ্ছি।

এইচটিএমএল

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

Answer 14

যদি এখনও কেউ আগ্রহী হন তবে কাস্টম রিপ্যাচচা নামে একটি সাধারণ জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে (jQuery নির্ভরতা নেই)। এটি আপনাকে সিএসএস সহ বোতামটি কাস্টমাইজ করতে দেয় এবং কিছু জেএস ইভেন্টগুলি বাস্তবায়িত করতে (প্রস্তুত / পরীক্ষিত) করতে দেয়। ধারণাটি হ'ল ডিফল্ট পুনরায় সংযুক্তিটিকে "অদৃশ্য" করা এবং তার উপর একটি বোতাম রাখা। কেবল পুনরায় সংশোধনের আইডি পরিবর্তন করুন এবং এটিই।

<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 তথ্যের আকার পরিবর্তন করতে লিঙ্ক যুক্ত করতে চান | গিক দেবী"  দ্বারা সরবরাহ করা হয়েছিল বিক্রম সিং Saini কেবল আপনি আইফ্রেম প্রণয়নে জোরদার করা ইনলাইন সিএসএস ব্যবহার করতে পারে রূপরেখা।

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

আপনি একটি গা dark ় বা হালকা রিক্যাপচা থিমের মধ্যেও চয়ন করতে পারেন । আমি আমার এঙ্গুলার 8 অ্যাপ্লিকেশনগুলির একটিতে এটি ব্যবহার করেছি

Answer 17

আমি একটি উত্তর এবং একটি অন্ধকার মোড আছে এমন একটি সাইটের জন্য রেইক্যাপচা ভি 2 স্টাইল করার চেষ্টা করে এই উত্তরটি জুড়ে এসেছি। আরো কিছু প্রায় অভিনয় এবং আবিষ্কার করেন যে ব্যতীত transform, filterএছাড়াও প্রয়োগ করা হয় iframeউপাদান হল তাই ডিফল্ট / হালকা reCAPTCHA ব্যবহার করে এবং ব্যবহারকারী অন্ধকার মোডে থাকে যখন এই কাজ শেষ পর্যন্ত:

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

hue-rotate(180deg)এটা যাতে লোগো এখনো নীল এবং চেক-চিহ্ন যখন ব্যবহারকারী এটিকে ক্লিক, যখন সাদা পালন এখনও সবুজ তোলে invert()বিপরীতভাবে কালো এবং ভাইস করতে 'ইডি।

এটি কোনও উত্তর বা মন্তব্যে দেখেনি তাই ভাগ করে নেওয়ার সিদ্ধান্ত নিয়েছে যদিও এটি পুরানো থ্রেড।

Answer 18

আপনি গুগল রেক্যাপচা ভি 2 স্টাইলিংয়ের জন্য আপনার ওয়েবসাইটে কয়েকটি সিএসএস ব্যবহার করতে পারেন :

- গুগল রেক্যাপচা ভি 2 উইজেটের রঙ, পটভূমি পরিবর্তন করুন:

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

অথবা

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

- এই স্নিপেটটি ব্যবহার করে গুগল রিক্যাচচা ভি 2 উইজেটটি পুনরায় আকার দিন:

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

- আপনার গুগল রেক্যাচা ভি 2 কে সাড়া দেবে:

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

উপরে থাকা সমস্ত উপাদান, সিএসএসের সম্পত্তি এটি কেবল আপনার রেফারেন্সের জন্য। আপনি এগুলি নিজের দ্বারা পরিবর্তন করতে পারেন (কেবল সিএসএস শ্রেণি নির্বাচক ব্যবহার করে)।

ওআইডব্লু ব্লগ দেখুন - গুগলের রেক্যাপচাএর সিএসএস কীভাবে সম্পাদনা করবেন (পুনরায় শৈলী, অবস্থান পরিবর্তন করুন, পুনরায় আকার পুনরায় আকার দিন)

আপনি গুগল রেক্যাপচা ভি 3 এর স্টাইলিংটি সেখানেও খুঁজে পেতে পারেন।

Comments

সিএসএস কেবল একই নথির মধ্যে রয়েছে। একটি আইফ্রেম হ'ল একটি সম্পূর্ণ ডকুমেন্ট তার নিজস্ব, এবং সুতরাং একটি সিএসএস বিধি যা এই পৃষ্ঠায় প্রযোজ্য যা আইফ্রেমে সেই আইফ্রেমের মধ্যে থাকা পৃষ্ঠায় প্রয়োগ করতে পারে না।

— Sandes