Recaptcha - Form Customization

Question

有誰知道recaptcha是否可以在沒有默認框架的情況下完全自定義。我需要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格，因此你可以使用CSS像這樣限制了它的寬度：

#recaptcha_image img { 
    width: 200px; 
} 

...但請記住，它會調整瀏覽器中的較大圖像的大小，並可能導致驗證碼變得不可讀，所以我不一定會推薦。無論你喜歡，recaptcha_response_field輸入也可以被設置。

請參閱「外觀和感覺自定義」一節here瞭解更多您可以（和應該）在自定義主題中執行的示例。

Answer 2

您可以創建一個自定義theme，它應該可以幫助您處理輸入字段，但我認爲您的圖像大小運氣不佳 - 它固定爲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> 

請注意，圖像越小，用戶閱讀的難度就越大。