javascript - 将 css 应用于 google recaptcha 元素

Question

我在我的表单中使用 Google reCAPTCHA 和一些验证技巧，如果没有检查 reCAPTCHA，它允许停止提交表单。

问题是，如果用户忘记检查它，我想在 iframe 中的验证码元素上应用一些 css 规则(即边框颜色)。我试图从我的示例中删除所有不必要的代码部分

html 表单

<form class="form-box" action="" method="POST">
    <label class="col-6" for="user-name">
        Name
        <input type="text" name="user-name" id="user-name"/>
    </label>

    <label class="col-6" for="user-phone">
        Phone
        <input type="text" name="user-phone" id="user-phone"/>
    </label>

    <div class="g-recaptcha" data-sitekey="[site-key here]"></div>

    <div class="col-6 wrap-btn">
        <input type="submit" name="submit" value="Step 2" class="btn blue">
    </div>
</form>

在我的 js 代码中，我试图用 .contents() 函数找到必要的元素

$('.form-box').submit(function(e){
if (grecaptcha.getResponse() == ""){
    e.preventDefault();
    $('.g-recaptcha iframe').contents().find('.rc-anchor-light').css('border', '1px solid red');
}
else { $('.form-box').submit(); } });

所以我得到了错误

The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

我想如果我可以从 https 发送请求，我会得到相同或类似的错误(因为没有办法将 js 代码应用于跨域 iframe 元素，对吧？)

那么，如果用户在提交前不检查它，有什么想法如何在 reCAPTCHA block 周围显示红色边框？

Answer 1

我能想到的最简单的方法是在包含 iframe 的 div 上放置一个边框。但是，这不一定与 iframe 的大小相同。但是，其中有一个嵌套的 div，它的大小是正确的。所以，下面的代码应该可以解决问题:

$('.form-box').submit(function(e){
if (grecaptcha.getResponse() == ""){
    e.preventDefault();
    $('.g-recaptcha div div').css('border', '1px solid red');
}
else { $('.form-box').submit(); } });