覆盖google recaptcha css以使其响应

Question

我在一个站点（不是Wordpress站点或Joomla）安装Google Recaptcha 所以不要提供任何WP插件或Joomla扩展:)

我的问题是，该网站是响应式的，而recaptcha则不是。当我使用Firebug查找其样式时，我意识到不仅Google提供的库不包含css文件，而且我无法在custom-styles.css文件中覆盖它们，因为Google非常周到地应用了!important选择器在他们的CSS中攻击一切，但我甚至尝试对它进行分类，以便我可以做出违规并希望覆盖Google的样式但是插件不起作用:(

有任何想法吗？

附：我也没有使用不同的重新验证码。抱歉。我敢肯定这里有一些收藏极客;）

这是HTML。这就是recaptcha.php从服务器呈现的内容。这不是我在实际PHP页面中所拥有的...（没有CSS，这是主要问题）

<div id="recaptcha_widget_div" style="" class=" recaptcha_nothad_incorrect_sol recaptcha_isnot_showing_audio"><div id="recaptcha_area"><table id="recaptcha_table" class="recaptchatable recaptcha_theme_red"> 
  <tbody>
     <tr> 
        <td colspan="6" class="recaptcha_r1_c1"></td> 
     </tr> 
     <tr> 
        <td class="recaptcha_r2_c1"></td> 
        <td colspan="4" class="recaptcha_image_cell">
            <center><div id="recaptcha_image" style="width: 300px; height: 57px;">
                  <img id="recaptcha_challenge_image" alt="reCAPTCHA challenge image" height="57" width="300" src="http://www.google.com/recaptcha/api/image?c=03AHJ_VutTaFjCI-gV3f3W2_M6gix7arVpF-9EOz-f773U5LmDrl33mKCn9wMXYGe0t8-xy-1HD0ysHzOI_NYyOtxOxD_a4Jj5G5h4bDMalKBQ5PDJaaE6ur8K44ilzimisHHYX6xZJ4y9xeuP6lT4vQa59-nNPju3VrlolnYgbM6oKgD7el1Rr9cpbRojjc_2zFraHkTjxyUU"></div>
            </center>
         </td> 
         <td class="recaptcha_r2_c2"></td> 
      </tr> 
      <tr> 
         <td rowspan="6" class="recaptcha_r3_c1"></td> 
         <td colspan="4" class="recaptcha_r3_c2"></td> 
         <td rowspan="6" class="recaptcha_r3_c3"></td> 
      </tr> 
      <tr> 
         <td rowspan="3" class="recaptcha_r4_c1" height="49"> 
              <div class="recaptcha_input_area"> 
                  <span id="recaptcha_challenge_field_holder" style="display: none;">                      
                      <input type="hidden" name="recaptcha_challenge_field" id="recaptcha_challenge_field" value="03AHJ_VutTaFjCI-gV3f3W2_M6gix7arVpF-9EOz-f773U5LmDrl33mKCn9wMXYGe0t8-xy-1HD0ysHzOI_NYyOtxOxD_a4Jj5G5h4bDMalKBQ5PDJaaE6ur8K44ilzimisHHYX6xZJ4y9xeuP6lT4vQa59-nNPju3VrlolnYgbM6oKgD7el1Rr9cpbRojjc_2zFraHkTjxyUU"></span>
                      <input name="recaptcha_response_field" id="recaptcha_response_field" type="text" autocorrect="off" autocapitalize="off" placeholder="Type the text" autocomplete="off" style="font-style: italic;"> 
                           <span id="recaptcha_privacy" class="recaptcha_only_if_privacy"><a href="http://www.google.com/intl/en/policies/" target="_blank">Privacy &amp; Terms</a></span> 
              </div> 
          </td> 
          <td rowspan="4" class="recaptcha_r4_c2"></td> 
          <td><a id="recaptcha_reload_btn" title="Get a new challenge">
              <img id="recaptcha_reload" width="25" height="17" src="http://www.google.com/recaptcha/api/img/red/refresh.gif" alt="Get a new challenge"></a></td> 
          <td rowspan="4" class="recaptcha_r4_c4"></td> 
      </tr> 
      <tr> 
          <td><a id="recaptcha_switch_audio_btn" class="recaptcha_only_if_image" title="Get an audio challenge">
               <img id="recaptcha_switch_audio" width="25" height="16" alt="Get an audio challenge" src="http://www.google.com/recaptcha/api/img/red/audio.gif"></a><a id="recaptcha_switch_img_btn" class="recaptcha_only_if_audio" title="Get a visual challenge">
               <img id="recaptcha_switch_img" width="25" height="16" alt="Get a visual challenge" src="http://www.google.com/recaptcha/api/img/red/text.gif"></a>
          </td> 
      </tr> 
      <tr> 
          <td><a id="recaptcha_whatsthis_btn" title="Help">
               <img id="recaptcha_whatsthis" width="25" height="16" src="http://www.google.com/recaptcha/api/img/red/help.gif" alt="Help"></a>
          </td> 
      </tr> 
      <tr> 
          <td class="recaptcha_r7_c1"></td> <td class="recaptcha_r8_c1"></td> 
      </tr> 
  </tbody>
 </table> 
</div> 
</div>

这就是我在页面中所拥有的

  require_once('recaptchalib.php');
  $publickey = "your_public_key"; // you got this from the signup page
  echo recaptcha_get_html($publickey);

这是我的问题

Answer 1

更改了自动高度和媒体查询

@media only screen and (max-width : 480px) {
    #recaptcha_challenge_image{
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    #recaptcha_response_field
    {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable #recaptcha_image {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable .recaptcha_r1_c1, 
    .recaptchatable .recaptcha_r3_c1, 
    .recaptchatable .recaptcha_r3_c2, 
    .recaptchatable .recaptcha_r7_c1, 
    .recaptchatable .recaptcha_r8_c1, 
    .recaptchatable .recaptcha_r3_c3, 
    .recaptchatable .recaptcha_r2_c1, 
    .recaptchatable .recaptcha_r4_c1, 
    .recaptchatable .recaptcha_r4_c2, 
    .recaptchatable .recaptcha_r4_c4, 
    .recaptchatable .recaptcha_image_cell {

    margin: 0 !important;
    width: 100% !important;
    background: none !important;
    height: auto !important;
    }

}

Answer 2

也许这可以帮助你在你的主要div上使用变换，你称之为recaptcha

transform: scale(0.75);
transform-origin: left top;

Answer 3

以下是我在2017/2018年发现的最佳解决方法：

.g-recaptcha > div {
    width: 100% !important;
}

.g-recaptcha iframe {
    width: 100% !important;
}

Answer 4

这是我的媒体查询解决方案。我使用scale将其缩小到适合移动设备的大小。

一个简单有效的解决方案：

@media (max-width:575px) {
    #rc-imageselect, .g-recaptcha {
        transform:scale(0.77);
        transform-origin:0 0;
        margin-bottom: -20px;
    }
}

Answer 5

很简单，您必须将样式属性从下面的代码复制到您的代码，然后您的问题将得到解决。

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

有关详细信息，请打开此Link

Answer 6

Google提供了有关如何在此处设置recaptcha表单样式的完整文档：

https://developers.google.com/recaptcha/docs/display

并且你可以完全覆盖他们自己提供的html / css。

Answer 7

您可能想要添加一些CSS样式，但我们选择删除所有不必要的东西。

将此代码添加到您的css文件中：

@media (min-width: 320px) and (max-width: 480px) {
        #recaptcha_challenge_image{
        margin: 0 !important;
        width: 100% !important;
        }
        #recaptcha_response_field
        {
        margin: 0 !important;
        width: 100% !important;
        }
        .recaptchatable #recaptcha_image {
        margin: 0 !important;
        width: 100% !important;
        }
        .recaptchatable .recaptcha_r1_c1, 
        .recaptchatable .recaptcha_r3_c1, 
        .recaptchatable .recaptcha_r3_c2, 
        .recaptchatable .recaptcha_r7_c1, 
        .recaptchatable .recaptcha_r8_c1, 
        .recaptchatable .recaptcha_r3_c3, 
        .recaptchatable .recaptcha_r2_c1, 
        .recaptchatable .recaptcha_r4_c1, 
        .recaptchatable .recaptcha_r4_c2, 
        .recaptchatable .recaptcha_r4_c4, 
        .recaptchatable .recaptcha_image_cell {

        margin: 0 !important;
        width: 100% !important;
        background: none !important;
        }

    }

Answer 8

试试这个吧。 Google responsive reCAPTCHA

Answer 9

对于reCAPTCHA（需要jQuery）：

$(function(){
  function rescaleCaptcha(){
    var width = $('.g-recaptcha').parent().width();
    var scale;
    if (width < 302) {
      scale = width / 302;
    } else{
      scale = 1.0; 
    }

    $('.g-recaptcha').css('transform', 'scale(' + scale + ')');
    $('.g-recaptcha').css('-webkit-transform', 'scale(' + scale + ')');
    $('.g-recaptcha').css('transform-origin', '0 0');
    $('.g-recaptcha').css('-webkit-transform-origin', '0 0');
  }

  rescaleCaptcha();
  $( window ).resize(function() { rescaleCaptcha(); });

});

这基本上会检查您的浏览器宽度，并取决于它应该转换的比例。此时的最佳解决方案。

截图结果（全宽，小宽度，最小宽度）：

Answer 10

最好的方法是使用google recaptcha并使用此css代码进行响应，

#rc-imageselect, .g-recaptcha {
   display: inline; //the most important
}

#rc-imageselect{
   max-width: 100%;
}

.g-recaptcha>div>div{
   width: 100% !important;
   height: 78px;
   transform:scale(0.77); //the code to rescale the captcha obtained in this page
   webkit-transform:scale(0.77);
   text-align: center;
   position: relative;
}

Answer 11

您只需为所需的特定设备添加一些转换样式：

 @media only screen and (max-width : 767px)     {

 #rc-imageselect, .g-recaptcha {
    transform: scale(0.77);
    -webkit-transform: scale(0.77);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0; }
}

Answer 12

在我的情况下，我减少了它的规模，我通过Bootstrap 4网格系统强制在中心水平对齐。 Click here看到结果。

码：

<div class="row justify-content-center">
     <div class="col g-recaptcha" data-sitekey="check_reCaptcha_doc_to_set_this" style="width: 304px !important; max-width: 304px !important; -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); margin: 0px; padding: 0px;">
     </div>
</div>

Answer 13

建立Jan's答案和Siraj Khan's答案，我添加了一些更多的样式来格式化右侧的按钮，让您刷新图像，大声播放，了解更多，并更容易阅读隐私和条款。

@media only screen and (max-width : 480px) {
  #recaptcha_challenge_image{
    margin: 0 !important;
    width: 100% !important;
  }
  #recaptcha_response_field {
    margin: 0 !important;
    width: 100% !important;
  }
  .recaptchatable #recaptcha_image {
    margin: 0 !important;
    width: 95% !important;
  }
  .recaptchatable .recaptcha_r1_c1,
  .recaptchatable .recaptcha_r3_c1,
  .recaptchatable .recaptcha_r3_c2,
  .recaptchatable .recaptcha_r7_c1,
  .recaptchatable .recaptcha_r8_c1,
  .recaptchatable .recaptcha_r3_c3,
  .recaptchatable .recaptcha_r2_c1,
  .recaptchatable .recaptcha_r4_c1,
  .recaptchatable .recaptcha_r4_c2,
  .recaptchatable .recaptcha_r4_c4,
  .recaptchatable .recaptcha_image_cell {
    margin: 0 !important;
    width: 100% !important;
    background: none !important;
  }
  #recaptcha_table tbody tr td {
    padding: 0 !important;
    width: 75px;
  }
  .recaptchatable .recaptcha_image_cell {
    padding-right: 0 !important;
  }
  #recaptcha_privacy a {
    line-height: 1.2em;
  }
  span#recaptcha_privacy {
    width: 50px;
  }
}