题
有谁知道,如果验证码可以在没有默认帧被完全定制。我需要的ReCaptcha图像仅是一定的宽度,以及所述输入域。有没有人成功做到了这一点。
解决方案
您可以通过包含这样的事情你的页面上指定使用“自定义”选项,主题自定义标记:
<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
输入也可以称呼。
见的你更多的例子在“外观和感觉定制”部分这里可以(也应该)做在一个自定义主题。
其他提示
您可以创建自定义主题应该帮助你的输入字段,但我觉得你的运气与图像大小的 - 它固定在300×57(你当然可以更改尺寸,但是,这将导致更加扭曲,并很可能完全不可读,图片)
http://risingofsilversurfer.blogspot.com/2009/10 /customize-recaptcha-theme.html
这适用于Firefox的,虽然不知道其他的浏览器,如果你需要它在IE6中工作,我不认为它接受CSS图像尺寸变更,所以它会看都不合时宜。
我所做的只是更新了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>
只需提防的图像越小,越难将供用户读取。
不隶属于 StackOverflow