Recaptcha - 表单自定义答案

【问题标题】：Recaptcha - Form CustomizationRecaptcha - 表单自定义
【发布时间】：2009-11-11 14:38:26
【问题描述】：

有谁知道recaptcha 是否可以在没有默认框架的情况下完全自定义。我需要 recaptcha 图像只有一定的宽度以及输入字段。以前有没有人成功地做到过。

【问题讨论】：

【解决方案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 输入也可以随意设置样式。

请参阅“外观自定义”部分here，了解您可以（并且应该）在自定义主题中执行的操作的更多示例。

【讨论】：

【解决方案2】：

您可以创建一个自定义 theme 来帮助您处理输入字段，但我认为您对图像大小不走运 - 它固定为 300 x 57（您当然可以更改尺寸，但是会导致图像更加扭曲，而且很可能完全不可读）

【讨论】：

【解决方案3】：

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

这适用于 firefox，虽然不确定其他浏览器，如果您需要它在 ie6 中工作，我认为它不接受 css 图像大小更改，所以它看起来完全不合适。

【讨论】：

【解决方案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>

请注意，图片越小，用户阅读的难度就越大。

【讨论】：