7

recaptcha 画像のサイズが 300x57 に固定されているのはなぜですか? 画像が挿入される div をカスタマイズする場合でも、div の幅と高さはオーバーライドされ、300x57 に設定されます。もちろん、レンダリング後に画像のサイズを変更できますが、開発者が希望するサイズの画像を生成するオプションがないのはなぜですか。

http://code.google.com/apis/recaptcha/docs/customization.html

reCAPTCHA は、ユーザーに CAPTCHA を表示するために、次の ID を持つ HTML 要素の存在に依存します: ID recaptcha_image を持つ空の div。ここに実際の画像が配置されます。div は 300x57 ピクセルになります

ありがとうございました

4

6 に答える 6

11 
#recaptcha_image img {
    width: 200px !important;
    height: 38px !important;
}
于 2011-04-20T22:07:16.433 に答える
1

新しい Google Recaptcha で機能するソリューション ( https://www.google.com/recaptcha/ )

<!--adjust to your needs -->
<div class="g-recaptcha" data-sitekey="your_sitekey" style="transform:scale(.8); margin:0 -30px">

于 2015-02-23T14:55:26.363 に答える
1

外部ファイルであっても、CSS ルールの後ろに !important を追加してインライン CSS をオーバーライドできます。

于 2010-10-10T22:23:04.500 に答える
1

CSS、デモによる完全なカスタマイズ

<form method="POST" action="">



<script type="text/javascript">
                                var RecaptchaOptions = {
                                    tabindex: 1,
                                    theme: 'custom',
                                    custom_theme_widget: 'recaptcha_widget'
                                };
                            </script>
                            <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">Type what you hear:</span>
                                <input type="text" id="recaptcha_response_field" name="recaptcha_response_field">
                                <div class="get_another_captcha"><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
                                <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type(&#39;audio&#39;)">Get an audio CAPTCHA</a></div>
                                <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type(&#39;image&#39;)">Get an image CAPTCHA</a></div>
                                <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>
                                <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=YourAPI"></script>
                                <noscript><iframe src="http://www.google.com/recaptcha/api/noscript?k=YourAPI" 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></div>
                            <script type="text/javascript">
                                window.onload = function() {
                                    Recaptcha.focus_response_field();
                                }
                            </script>
                            <table cellspacing="0" cellpadding="4" border="0" style="font-family: Helvetica, sans-serif; color: #000000; font-size: 12px;"><tr><td><div><input type="submit" name="Button1" value="Submit"></div></td></tr></table></form>
于 2014-02-12T17:23:50.933 に答える
0

これは私にとってはうまくいき、内側の画像だけでなくコントロール全体の幅を効果的に変更しました

 #recaptcha_area
   {
         width: 250px !important;
         height: 38px !important;
   }
于 2014-10-23T11:30:03.927 に答える
0

noCaptcha Recaptcha の新しいバージョンでは、次のように動作します。

<div class="g-recaptcha" data-theme="light" data-sitekey="XXXXXXXXXXXXX"      
style="transform:scale(0.77);transform-origin:0;-webkit-transform:scale(0.77);
transform:scale(0.77);-webkit-transform-origin:0;transform-origin:0 0;"></div>

まだスケーリングする場合は、div の元のサイズが使用されます。しかし、上記の解決策は空白の問題を修正します。

参照

于 2015-08-21T03:18:05.363 に答える