Recaptcha - Formularanpassung

Question

Wer weiß, wenn recaptcha kann vollständig ohne den Standardrahmen anpassen werden. Ich brauche das recaptcha Bild nur eine bestimmte Breite sowie das Eingabefeld zu sein. Hat diese, bevor jemand getan mit Erfolg.

Answer 1

Sie können benutzerdefinierte angeben Markup die ‚custom‘ Thema Option durch so etwas wie dies auf Ihrer Seite einschließlich:

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

Sie erstellen dann ein div auf der Seite der custom_theme_widget-ID wie folgt anzupassen:

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

Das Bild wird in die recaptcha_image div eingefügt werden, so dass man seine Breite mit CSS wie folgt einschränken könnte:

#recaptcha_image img {
    width: 200px;
}

... aber denken Sie daran, dass es das größere Bild im Browser der Größe und kann das Captcha verursacht unlesbar zu machen, so würde ich nicht unbedingt, dass empfehlen. Der recaptcha_response_field Eingang aber auch gestylt werden könnten Sie wie.

Sehen Sie den "Look and Feel Customization" Abschnitt hier für weitere Beispiele, was Sie kann (und soll) in einem benutzerdefinierten Thema tun.

Answer 2

Sie können eine benutzerdefinierte erstellen Thema dass sollten Sie mit dem Eingabefeld helfen, aber ich glaube, du bist kein Glück mit der Bildgröße - bei 300 x 57 festgelegt ist (Sie können natürlich die Dimensionen verändern, aber das führt zu einem noch verzerrt, und möglicherweise völlig unleserlich, Bild)

Answer 3

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

Dies funktioniert für Firefox, aber nicht sicher über anderen Browser, wenn Sie es zur Arbeit in IE6 müssen ich glaube nicht, dass CSS-Bildgröße ändern akzeptiert, so dass es alle deplatziert aussehen.

Answer 4

Alles, was ich tat, war die reCAPTCHA Stile aktualisieren.

Das folgende CSS ändert sich die Breite und Höhe des Bildes und Behälter. Die Abmessungen sind ursprünglich von Google definiert, sondern kann durch das Hinzufügen neuer Arten zu Ihrer Seite überschrieben.

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

Nur hüte dich, dass je kleiner das Bild, desto schwieriger wird es für die Benutzer zu lesen.