css - Yii 响应式 Recaptcha

Question

我目前在我的 Yii 元素中使用这个扩展 http://www.yiiframework.com/extension/recaptcha/

它工作正常。但自从我想让我的网站更具响应性。我对代码做了一些更改，但它停止工作了。

这是我之前的设置，效果很好

/*<![CDATA[*/
var RecaptchaOptions = {
   theme : 'white',
   lang : 'en',
   tabindex : 0
};
/*]]>*/

这是我当前的设置

/*<![CDATA[*/
var RecaptchaOptions = {
   theme : 'custom',
   custom_theme_widget : 'responsive_recaptcha',
   lang : 'en',
   tabindex : 0
};
/*]]>*/

下面是我的CSS

*,
*:after,
*:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#responsive_recaptcha {
  background-color: #b71800;
  padding: 0.5em;
  border-radius: 1em;
  position: relative;
  overflow: auto;
  max-width: 480px;
  font: 0.75em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ffffff;
}
#responsive_recaptcha a {
  color: #ffffff;
  text-decoration: none;
}
#responsive_recaptcha img,
#responsive_recaptcha #recaptcha_image {
  width: 100% !important;
  height: auto !important;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#responsive_recaptcha .solution {
  margin-top: 0.5em;
  padding: 0.5em;
  padding-top: 1em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #fbe098;
  color: #000000;
  display: block;
}
#responsive_recaptcha .solution input {
  display: block;
  width: 100%;
  margin: 0.5em auto;
  -webkit-appereance: none;
  border: 1px solid #f7c236;
  font: inherit;
  font-size: 150%;
  outline: none;
}
#responsive_recaptcha .solution input:focus {
  border-color: #b71800;
}
#responsive_recaptcha .options {
  margin-top: 0.5em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#responsive_recaptcha .options a {
  background-color: #c5523d;
  display: block;
  padding: 0.5em;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}
#responsive_recaptcha .options a:first-child {
  border-radius: 0.5em 0.5em 0 0;
}
#responsive_recaptcha .options a:last-child {
  border-radius: 0 0 0.5em 0.5em;
  border-bottom: 1px solid #000000;
}
@media screen and (min-width: 480px) {
  #responsive_recaptcha .solution {
    float: left;
    width: 66%;
    margin-top: 0.5em;
    padding: 1em;
  }
  #responsive_recaptcha .solution input {
    margin: 0.35em auto;
    width: 90%;
  }
  #responsive_recaptcha .options {
    float: right;
    width: 34%;
    padding-left: 0.5em;
  }
}

当我使用自定义主题时，不再显示任何内容。知道我错过了什么吗？

Answer 1

几个月前才这样做。这是我的解决方案

打开你的 extensions/recaptcha/EReCaptcha.php 并将 run() 函数更改为此

/**
     * Renders the widget.
     */
    public function run()
    {
      $body = '';
      if ($this->hasModel()) {
         $body = CHtml::activeHiddenField($this->model, $this->attribute) . "\n";
      }

      /*
       * Added the HTML below to support our custom responsive theme!!
       */
      echo $body . '<div id="responsive_recaptcha" style="display:none">

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

                  <label class="solution">
                    <span class="recaptcha_only_if_image">Type the two words:</span>
                    <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

                    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
                  </label>
                  <div class="options">
                    <a href="javascript:Recaptcha.reload()" id="icon-reload">Get another CAPTCHA</a>
                    <a class="recaptcha_only_if_image" href="javascript:Recaptcha.switch_type(\'audio\')" id="icon-audio">Get an audio CAPTCHA</a>
                    <a class="recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type(\'image\')" id="icon-image">Get an image CAPTCHA</a>
                    <a href="javascript:Recaptcha.showhelp()" id="icon-help">Help</a>
                  </div>
                </div>'.

      recaptcha_get_html($this->publicKey,
                                      null,
                                      ($this->useSsl ? true : Yii::app()->request->isSecureConnection));
    }

那应该有效:)