由于隐藏徽章并不是真正合法的根据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;
}

我想这是你合法能做到的极限了。

对于谷歌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;
}

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

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

对于在Wordpress上使用Contact Form 7的用户来说，这个方法对我来说是有效的: 我隐藏v3 Recaptcha在所有页面上，除了那些与联系7表格。

但是这种方法应该适用于任何使用唯一类选择器的站点，该类选择器可以识别带有文本输入表单元素的所有页面。

首先，我在CSS中添加了一个目标样式规则，可以折叠瓷砖:

CSS

 div.grecaptcha-badge.hide{
    width:0 !important;
}

然后我在我的头部添加了JQuery脚本，在窗口加载后触发，这样'grecaptcha-badge'类选择器就可以使用JQuery，并且可以添加'hide'类来应用可用的CSS样式。

$(window).load(function () { 
    if(!($('.wpcf7').length)){ 
      $('.grecaptcha-badge').addClass( 'hide' );
       }
});

我的瓷砖仍然会在每一页上闪烁半秒钟，但这是我迄今为止发现的最好的解决办法，我希望能遵守。欢迎提出改进建议。

我的解决方案是隐藏徽章，然后在用户关注表单输入时显示它——因此仍然遵循谷歌的t&c。

注意:我调整的reCAPTCHA是由WordPress插件生成的，所以你可能需要用<div class="inv-recaptcha-holder">…< / div >自己。

CSS

.inv-recaptcha-holder {
  visibility: hidden;
  opacity: 0;
  transition: linear opacity 1s;
}

.inv-recaptcha-holder.show {
  visibility: visible;
  opacity: 1;
  transition: linear opacity 1s;
}

jQuery

$(document).ready(function () {
  $('form input, form textarea').on( 'focus', function() {
    $('.inv-recaptcha-holder').addClass( 'show' );
  });
});

显然，如果需要，您可以更改jQuery选择器以针对特定的表单。

我测试了所有的方法，并且:

警告:显示:none禁用垃圾邮件检查!

可见度:隐藏和不透明度:0不禁用垃圾邮件检查。

使用代码:

.grecaptcha-badge { 
    visibility: hidden;
}

当您隐藏徽章图标时，谷歌希望您通过添加以下内容在表单上引用他们的服务:

<small>This site is protected by reCAPTCHA and the Google 
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</small>