如何用CSS移动Google Recaptcha v3 Badge位置 避免遮挡WhatsApp按钮

完全可以通过CSS实现该需求，具体操作方法如下：

• 首先确认你站点的reCAPTCHA定位类型，绝大多数悬浮式reCAPTCHA默认固定定位在左下角，用以下CSS代码即可覆盖原有样式调整到右下角：

.g-recaptcha {
  /* 取消原有左侧定位 */
  left: auto !important;
  /* 设置距离右侧15px，可根据需求调整数值 */
  right: 15px !important;
}

注：加!important是为了覆盖Google reCAPTCHA自带的内联高优先级样式，确保自定义规则生效。

• 如果你站点的reCAPTCHA是嵌入在表单内部的，给表单外层容器加上右对齐规则即可：

/* 下面的.form-container请替换为你站点实际表单外层容器的类名/ID */
.form-container {
  display: flex;
  justify-content: flex-end;
}

你可以先打开浏览器F12开发者工具，选中reCAPTCHA元素临时修改样式验证效果，确认适配没问题后再将代码添加到站点的自定义CSS文件、或者主题后台的自定义CSS输入框中即可生效。

内容的提问来源于stack exchange，提问作者Ricardo Matute