在实现新的谷歌Invisible reCATPTCHA时,默认情况下,当你滚动屏幕时,屏幕右下方会弹出一个小的“受reCAPTCHA保护”徽章。

我想把这个藏起来。


当前回答

我看到了下一个关于这个的评论

如果您想将自己的CSS应用到徽章上,那么将徽章内联放置也很有帮助。但是请记住,当您注册API密钥时,您同意显示谷歌的条款和条件-所以请不要隐藏它。虽然可以用CSS让徽章完全消失,但我们不推荐这样做。

其他回答

是的,你能做到。您可以使用css或javascript隐藏reCaptcha v3徽章。

CSS方式 使用display: none或visibility: hidden隐藏reCaptcha批。这既简单又快捷。

.grecaptcha-badge {
    display:none !important;
}

Javascript的方式

var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

隐藏徽章是有效的,根据谷歌政策,并在faq回答这里。建议显示谷歌的隐私政策和使用条款,如下所示。

这不会禁用垃圾邮件检查

div.g-recaptcha > div.grecaptcha-badge {
    width:0 !important;
}

对于谷歌reCaptcha v3,常见问题解答如下:

只要包含reCAPTCHA,您就可以隐藏徽章 在用户流程中可见的品牌。请包括以下文本: 此站点受reCAPTCHA和谷歌. com保护 <a href="https://policies.google.com/privacy">隐私策略</a> and <a href="https://policies.google.com/terms">服务条款</a>适用。 例如: 注意:如果您选择隐藏徽章,请使用 .grecaptcha-badge{可见性:隐藏;}

目前尚不清楚这是否适用于reCaptcha v2。我建议升级到v3,因为它对您的访问者来说是一个更好的体验。

我决定隐藏徽章在所有页面上,除了我的联系页面(使用Wordpress):

/* Hides the reCAPTCHA on every page */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Shows the reCAPTCHA on the Contact page */
/* Obviously change the page number to your own */
.page-id-17 .grecaptcha-badge {
    visibility: visible !important;
}

我不是一个网页开发人员,所以请纠正我,如果有什么错误。

编辑:更新到使用可见性而不是显示。

将数据标记属性设置为内联

<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />

并添加以下CSS

.grecaptcha-badge {
    display: none;
}