验证码 - 表单自定义

Question

有谁知道，如果验证码可以在没有默认帧被完全定制。我需要的ReCaptcha图像仅是一定的宽度，以及所述输入域。有没有人成功做到了这一点。

Answer 1

您可以通过包含这样的事情你的页面上指定使用“自定义”选项，主题自定义标记：

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

您然后在页面上创建一个div匹配custom_theme_widget ID是这样的：

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

在图像将被插入到recaptcha_image DIV，因此你可以使用CSS像这样限制了它的宽度：

#recaptcha_image img {
    width: 200px;
}

...但请记住，这将调整在浏览器中较大的图像，并可能导致的验证码，变得不可读，所以我不一定会推荐。但是你喜欢的recaptcha_response_field输入也可以称呼。

见的你更多的例子在“外观和感觉定制”部分这里可以（也应该）做在一个自定义主题。

Answer 2

您可以创建自定义主题应该帮助你的输入字段，但我觉得你的运气与图像大小的 - 它固定在300×57（你当然可以更改尺寸，但是，这将导致更加扭曲，并很可能完全不可读，图片）

Answer 3

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

这适用于Firefox的，虽然不知道其他的浏览器，如果你需要它在IE6中工作，我不认为它接受CSS图像尺寸变更，所以它会看都不合时宜。

Answer 4

我所做的只是更新了reCAPTCHA的风格。

下面的CSS改变图像和容器的宽度和高度。该尺寸最初是由谷歌定义，但可以通过添加新的样式到您的网页被覆盖。

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

只需提防的图像越小，越难将供用户读取。