在实现新的谷歌Invisible reCATPTCHA时，默认情况下，当你滚动屏幕时，屏幕右下方会弹出一个小的“受reCAPTCHA保护”徽章。
我想把这个藏起来。
当前回答
将数据标记属性设置为内联
<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />
并添加以下CSS
.grecaptcha-badge {
display: none;
}
其他回答
由于隐藏徽章并不是真正合法的根据TOU，现有的放置选项破坏了我的UI和/或UX，我想出了以下自定义，模仿固定定位，但取而代之的是内联渲染:
你只需要在你的徽章容器上应用一些CSS:
.badge-container {
display: flex;
justify-content: flex-end;
overflow: hidden;
width: 70px;
height: 60px;
margin: 0 auto;
box-shadow: 0 0 4px #ddd;
transition: linear 100ms width;
}
.badge-container:hover {
width: 256px;
}
我想这是你合法能做到的极限了。
将数据标记属性设置为内联
<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />
并添加以下CSS
.grecaptcha-badge {
display: none;
}
我决定隐藏徽章在所有页面上，除了我的联系页面(使用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;
}
我不是一个网页开发人员，所以请纠正我，如果有什么错误。
编辑:更新到使用可见性而不是显示。
Matthew Dowell的帖子略有变化，避免了短闪光，但在接触形式7可见时显示:
div.grecaptcha-badge{
width:0 !important;
}
div.grecaptcha-badge.show{
width:256px !important;
}
然后，我在子主题的header.php中添加了以下内容:
<script>
jQuery( window ).load(function () {
if( jQuery( '.wpcf7' ).length ){
jQuery( '.grecaptcha-badge' ).addClass( 'show' );
}
});
</script>
谷歌现在允许隐藏徽章，从常见问题解答:
我想把reCAPTCHA徽章藏起来。什么是允许的? 只要在用户流中可见地包含reCAPTCHA品牌，您就可以隐藏徽章。请包括以下文本: 此站点受reCAPTCHA和谷歌. com保护 <a href="https://policies.google.com/privacy">隐私策略</a> and <a href="https://policies.google.com/terms">服务条款</a>适用。 例如:
所以你可以简单地隐藏它使用下面的CSS:
.grecaptcha-badge {
visibility: hidden;
}
不要使用display: none;因为它似乎禁用了垃圾邮件检查(谢谢@Zade)
