Recaptcha按钮难看，无法修复

Question

首先，我只是想让你知道我确实已经检查了“Recaptcha is broken”问题，其中解决问题的方法是将行高设置为0.这对我来说无济于事。

我已经在我的网站上实施了Google巨大的Recaptcha，但这就是一个问题;按钮的上方和下方都有白色空间，因此在我的Recaptcha框下面有这个非常丑陋的图形边框。检查下图。我检查了浏览器中的源代码，好像它生成了一个iFrame，这意味着我显然不能影响样式。跆拳道？

Answer 1

您可以根据documentation自行自定义reCAPTCHA的样式。直接引用文章：

  

要实现所有这一切，首先将以下代码放在主HTML页面中reCAPTCHA出现的元素之前的任何位置：

<script type="text/javascript">
  var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };

     

然后，在要显示reCAPTCHA的元素内，放置：

<div id="recaptcha_widget" style="display:none">

  <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

  <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

  <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

  <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

  <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

</div>

<script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>