自定义 CSS 可以更改 Invisible ReCAPTCHA 的显示吗？

Question

我正在为我的 WordPress CF7 表单使用 Invisible ReCAPTCHA。 高级验证码设置允许将徽章定位在右下角、左下角或内联。我喜欢只有带有底部设置的徽章图标的紧凑显示，但我不喜欢它随着视口滚动的粘性特性，尤其是在狭窄的移动设备上。内联设置将验证码放置在表单底部的“提交”按钮上方，但不幸的是，它以完整的展开状态显示。任何人都可以向其中任何一个建议 CSS：

1) 使用右下设置并防止其滚动？

2) 将 inline 设置更改为仅显示 徽章图标（受 保护的内容在悬停时显示)?

Screenshots

Answer 1

我想通了！

1. 转到 Invisible Recaptcha 的 Advanced Settings 面板，选择 徽章 > 右下角。

2. 在您的 CSS 样式表中，添加：

.grecaptcha-badge {
  width: 70px !important;
  height: 60px;
  position: static !important;
  float: right !important;
  transform: translateY(12px);  /* Bottom-aligns badge icon & CF7 submit button.
                                   Your value may need to be different */
}
.grecaptcha-badge:hover {
    width: 256px !important;
}