覆盖Google的新reCaptcha以使其响应

时间:2014-12-22 13:46:22

标签: twitter-bootstrap-3 responsive-design recaptcha

我正在努力寻找一种方法来覆盖谷歌的新回收样式。我相信新版本会在api JS文件中加载其样式。

有人知道如何覆盖它以使其在引导程序中响应吗?

<script src="https://www.google.com/recaptcha/api.js?render=onload"></script>
<div class="g-recaptcha" data-sitekey="key"></div>

4 个答案:

答案 0 :(得分:2)

只需让iframe像这样响应

.g-recaptcha{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
  }
  .g-recaptcha iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
this will make it res

答案 1 :(得分:1)

我要再添加一件事给Boukraa Mohamed的想法:

.g-recaptcha > iframe

这样,即使iframe内置多个div标签也能正常工作。

答案 2 :(得分:0)

您的问题不清楚要覆盖哪些属性。

Google的代码会使用类g-recaptcha在div中加载iframe。 iframe有自己的样式表。您可以使用javascript或jQuery操纵iframe中的样式表,请参阅:How to apply CSS to iframe?

在使用jQuery操作样式表之前,您应确保已加载iframe。 请参阅:https://developers.google.com/recaptcha/docs/display#explicit_render 似乎api没有提供触发此onload事件的函数。

答案 3 :(得分:0)

使用下面提到的代码

.g-recaptcha {transform: scale(0.85); transform-origin: left top;}