2016-08-23 6 views
2

recaptcha v2.0ウィジェットの境界線を非表示にして、サイトのルック・アンド・フィールに視覚的に統合することができます。recaptcha v2.0ウィジェットの枠線を隠す方法は?

注:StackOverflowの質問のほとんどは、私が「にISNの周りにreCAPTCHAのののiframeのFRAMEBORDER属性を削除する話題の中心部、上で見つけたので、私は、質問としてこれを掲示し、ソリューションを提供しています技術的には私が後にしている。私はその結果の後ろにあります - 私はより大きな視覚的な文脈の中で位置付けることができるエッジリーな再構成ウィジェットです。

私はこれが役に立ちそうです!

答えて

0

私はV2.0 reCAPTCHAの(チェックボックス「私はロボットじゃない」との1)の境界線を非表示にしたかった、と次のようにそれを解決:

reCAPTCHAのdivの(ラップ"g-recaptcha"クラスでマークされているもの)を別のdivで整列し、iframeよりも少し小さいサイズにしてiframeをposition:relativeとleft:-10pxで移動して境界を隠します。

"コンパクト"バージョンを使用している場合は、サイジングを調整する必要があります...私は "通常"バージョンの作品を提供しています。

注:Safari 9.1.2(OSX)のみでテストされていますが、この技術は他のブラウザにも変換されると思います。

HTML:

<div class="my-div"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div> 

CSS:

.my-div { 
    display: inline-block; 
    overflow: hidden; 
    width: 290px; /* note the embedded iframe is 302x76 */ 
    height: 74px; 
    text-align: left; 
} 

.my-div iframe { 
    position: relative; 
    left: -10px; 
} 
関連する問題