reCAPTCHAの - フォームのカスタマイズ

StackOverflow https://stackoverflow.com/questions/1715575

  •  19-09-2019
  •  | 
  •  

質問

reCAPTCHAのは、完全にデフォルトのフレームなしでカスタマイズすることができるならば誰でも知っています。私は一定の幅だけでなく、入力フィールドであることをreCAPTCHAのイメージが必要です。誰もが成功を収めて前にこれを行っている。

役に立ちましたか？

解決

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

<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>
あなたはこのようにCSSを使用して、その幅を制限することができるように、

の画像は、recaptcha_image divの中に挿入されます。

#recaptcha_image img {
    width: 200px;
}

...しかし、それは、ブラウザでの大きな画像のサイズを変更し、キャプチャが読めなくなることがありますので、私は必ずしもお勧めしませんことを覚えておいてください。あなたが好きしかしrecaptcha_response_field入力もスタイリングすることができます。

ここを何より多くの例については、「ルックアンドフィールのカスタマイズ」セクションを参照してください。 （とすべきである）カスタムテーマで行うことができます。

他のヒント

あなたは、入力フィールドのお手伝いをする必要があるカスタムテーマを作成することができます私はあなたが画像サイズで運が悪いだと思う - それは、

（あなたはもちろんの寸法を変更することができますが、それがさらに歪んだ、と非常に可能性を完全読めない、画像になります）300×57に固定されています

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

あなたはそれがIE6で動作する必要がある場合は、

これはFirefoxのために働く、他のブラウザについてはよく分からないが、私はそれはCSSの画像サイズの変更を受け付けないと思うので、それは場違いにすべてを見ていきます。

私がしたすべては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>

ただ、画像を小さく、難しくは読むためにユーザーのためになることを注意します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top