php - Recaptcha - 表单定制

Question

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

Answer 1

您可以通过在页面上包含以下内容来使用“自定义”主题选项指定自定义标记：

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

然后，您在页面上创建一个 div 以匹配custom_theme_widgetid，如下所示：

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

图像将被插入到recaptcha_imagediv 中，因此您可以使用 CSS 限制其宽度，如下所示：

#recaptcha_image img {
    width: 200px;
}

...但请记住，它会调整浏览器中较大图像的大小，并可能导致验证码变得不可读，所以我不一定建议这样做。输入的recaptcha_response_field样式也可以随心所欲。

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

Answer 2

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

Answer 3

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

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

Answer 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>

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