Recaptcha - Formularanpassung

Question

Weiß jemand, ob recaptcha vollständig ohne den Standardrahmen angepasst werden kann. Ich brauche das recaptcha Bild, um nur eine bestimmte Breite sowie das Eingabefeld sein. Hat jemand dies vor mit Erfolg getan.

Answer 1

Sie können die benutzerdefinierte Markierung mit der Option "benutzerdefiniert" festlegen, indem Sie etwas wie dieses in Ihre Seite einfügen:

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

Anschließend erstellen Sie ein Div auf der Seite, das dem custom_theme_widget Ich mag das:

<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 Datei recaptcha_image div, so dass Sie seine Breite mit CSS wie folgt begrenzen können:

#recaptcha_image img {
    width: 200px;
}

...aber bedenken Sie, dass dadurch das größere Bild im Browser verkleinert wird und das Captcha möglicherweise unlesbar wird, daher würde ich das nicht unbedingt empfehlen. Die recaptcha_response_field Der Eingang kann auch nach Belieben gestaltet werden.

Siehe den Abschnitt "Anpassung von Aussehen und Bedienung". aquí für weitere Beispiele dafür, was Sie in einem benutzerdefinierten Thema tun können (und sollten).

Answer 2

Sie können eine benutzerdefinierte Thema das sollte Ihnen mit dem Eingabefeld helfen, aber ich glaube, Sie haben Pech mit der Bildgröße - sie ist auf 300 x 57 festgelegt (Sie können die Abmessungen natürlich ändern, aber das führt zu einem noch stärker verzerrten und möglicherweise völlig unlesbaren Bild)

Answer 3

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

dies funktioniert für Firefox, wenn auch nicht sicher über andere Browser, wenn Sie es brauchen, um in ie6 arbeiten ich glaube nicht, dass es akzeptiert css Bildgröße ändern, so dass es alle fehl am Platz aussehen wird.

Answer 4

Ich habe lediglich die reCAPTCHA-Stile aktualisiert.

Das folgende CSS ändert die Breite und Höhe des Bildes und des Containers. Die Abmessungen sind ursprünglich von Google definiert, können aber durch Hinzufügen neuer Stile zu Ihrer Seite überschrieben werden.

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

Je kleiner das Bild ist, desto schwieriger wird es für die Nutzer zu lesen sein.