php - 要約-フォームのカスタマイズ

Question

デフォルトのフレームなしでrecaptchaを完全にカスタマイズできるかどうか誰かが知っていますか？reCAPTCHA画像は、入力フィールドだけでなく、特定の幅のみである必要があります。誰かがこれを成功させたことがありますか。

Answer 1

ページに次のようなものを含めることにより、「カスタム」テーマオプションを使用してカスタムマークアップを指定できます。

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

custom_theme_widget次に、次のようにIDに一致するdivをページに作成します。

<div id="recaptcha_widget">
    <div id="recaptcha_image"></div>
    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
</div>

画像はdivに挿入されるrecaptcha_imageため、CSSを使用して次のように幅を制限できます。

#recaptcha_image img {
    width: 200px;
}

...ただし、ブラウザの大きな画像のサイズが変更され、キャプチャが判読できなくなる可能性があることに注意してください。必ずしもお勧めしません。入力は、recaptcha_response_field好きなようにスタイル設定することもできます。

カスタムテーマで実行できる（および実行する必要がある）その他の例については、ここの「ルックアンドフィールのカスタマイズ」セクションを参照してください。

Answer 2

入力フィールドに役立つカスタムテーマを作成することはできますが、画像サイズがうまくいかないと思います。300x 57に固定されています（もちろん、サイズを変更することはできますが、結果として均等になります。より歪んだ、そしておそらく完全に読めない画像）

Answer 3

http://risingofsilversurfer.blogspot.com/2009/10/customize-recaptcha-theme.html

これはFirefoxで機能しますが、他のブラウザについてはわかりませんが、ie6で機能する必要がある場合は、css画像サイズの変更を受け入れないと思います。

Answer 4

私がしたのは、reCAPTCHAスタイルを更新することだけでした。

次のCSSは、画像とコンテナの幅と高さを変更します。寸法は元々Googleによって定義されていますが、ページに新しいスタイルを追加することで上書きできます。

<style type="text/css">
#recaptcha_image img{
    height:46px;
    width:230px;
    margin: 0px;
    padding: 0px;
}
#recaptcha_container {
    margin: 0px;
    padding: 0px;
    width: 230px;
}
</style>

画像が小さいほど、ユーザーが読みにくくなることに注意してください。