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

Question

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

1) 使用右下角 设置并阻止它滚动？

2) 更改 内联 设置以显示 仅 徽章图标（带有 受 悬停时显示的内容保护）？

Screenshots

Answer 1

我想通了！

1. 转到 Invisible Recaptcha 的 Advanced Settings 面板，select Badge > 右下角.

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;
}