Question

我正在寻找通过Contact Form 7 WordPress插件中的短代码生成的Google reCaptcha（v2 - 带复选框的那个）的样式。

带有reCaptcha短代码的表单如下所示：

<label> Your First Name (required)
    [text* first-name] </label>

<label> Your Last Name (required)
    [text* last-name] </label>

<label> Phone Number
    [text* phone-number] </label>

<label> Your Email (required)
    [email* your-email] </label>

[mc4wp_checkbox id:subscribe-checkbox]

<label> Your Message
    [textarea your-message] </label>

[honeypot honeypot-939]

[recaptcha id:google-recaptcha]

[submit "Submit"]

在网站上解析时，#google-recaptcha的源代码是：

<div data-sitekey="hidden_" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha" id="google-recaptcha">
    <div style="width: 304px; height: 78px;">
        <div>
            <iframe src="https://www.google.com/recaptcha/api2/anchor?k=hidden" title="recaptcha widget" scrolling="no" name="undefined" width="304" height="78" frameborder="0">
                <html dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                    <head>
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <style type="text/css"> /* fonts and stuff removed */ </style>
                        <link rel="stylesheet" type="text/css" href="https://www.gstatic.com/recaptcha/api2/r20170206171236/styles__ltr.css">
                        <script type="text/javascript" src="scripts-removed"></script>
                    </head>
                    <body>
                            <div class="rc-anchor-alert"></div>
                            <input id="recaptcha-token" value="hidden-from-view" type="hidden">
                            <script>scripts removed</script>
                            <div class="rc-anchor rc-anchor-normal rc-anchor-light">
                                <div class="rc-anchor-aria-status">
                                    <section>
                                        <span id="recaptcha-accessible-status" aria-live="assertive" aria-atomic="true">Recaptcha requires verification</span>
                                    </section>
                                </div>
                            <div class="rc-anchor-error-msg-container" style="display:none">
                                <span class="rc-anchor-error-msg"></span>
                            </div>
                            <div class="rc-anchor-content">
                                <div class="rc-inline-block">
                                    <div class="rc-anchor-center-container">
                                        <div class="rc-anchor-center-item rc-anchor-checkbox-holder">
                                            <span class="recaptcha-checkbox goog-inline-block recaptcha-checkbox-unchecked rc-anchor-checkbox" role="checkbox" aria-checked="false" id="recaptcha-anchor" tabindex="0" dir="ltr" aria-labelledby="recaptcha-anchor-label">
                                                <div class="recaptcha-checkbox-border" role="presentation"></div>
                                                <div class="recaptcha-checkbox-borderAnimation" role="presentation"></div>
                                                <div class="recaptcha-checkbox-spinner" role="presentation"></div>
                                                <div class="recaptcha-checkbox-spinnerAnimation" role="presentation"></div>
                                                <div class="recaptcha-checkbox-checkmark" role="presentation"></div>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="rc-inline-block">
                                    <div class="rc-anchor-center-container">
                                        <label class="rc-anchor-center-item rc-anchor-checkbox-label" aria-hidden="true" role="presentation" id="recaptcha-anchor-label">I'm not a robot</label>
                                    </div>
                                </div>
                            </div>
                            <div class="rc-anchor-normal-footer">
                                <div class="rc-anchor-logo-portrait" aria-hidden="true" role="presentation">
                                    <div class="rc-anchor-logo-img rc-anchor-logo-img-portrait"></div>
                                    <div class="rc-anchor-logo-text">reCAPTCHA</div>
                                </div>
                                <div class="rc-anchor-pt">
                                    <a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a><span aria-hidden="true" role="presentation"> - </span><a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a>
                                </div>
                            </div>
                        </div>
                    </body>
                </html>
            </iframe>
        </div>
        <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; ">
        </textarea>
    </div>
</div>

实际上，我只是想让reCaptcha盒全宽。到目前为止，我已经得到了：

使用此css：

#google-recaptcha div {
    width: 100% !important;
}

#google-recaptcha div > iframe {
    width: 100% !important;
}

/*#google-recaptcha > div > div > iframe > html > body > div.rc-anchor, #google-recaptcha > div > div > iframe > html > body > div.rc-anchor-normal, #google-recaptcha > div > div > iframe > html > body > div.rc-anchor-light {
    width: 99% !important;
}*/

#google-recaptcha > div > div > iframe > html > body .rc-anchor.rc-anchor-normal.rc-anchor-light {
    width: 99% !important;
}

 #google-recaptcha > div > div > iframe > html > body > div.rc-anchor-light {
     background: #f6f6f6 !important;
     border: 0px solid #d3d3d3 !important;
     color: #003a79 !important;
 }

但正如您所看到的，它并没有处理我的.rc-anchor样式。我试过玩不同的儿童选择器和类似的事情，但我无法弄清楚我哪里出错了。

当我在FireFox检查器中调整宽度时，它会按照我想要的方式工作和调整，但这显然会调整Google styles__ltr.css，无论我尝试什么，它都必须覆盖我的CSS。

有人可以帮帮我吗？

提前致谢

Answer 1

只需将此代码放在contact7表单中即可调整您的转换比例

<div class=”g-recaptcha” data-sitekey=”XXXXXXXXXXXXX5oXXXXXX” style=”transform:scale(0.88);-webkit-transform:scale(0.88);transform-origin:0 0;-webkit-transform-origin:0 0;”>
[recaptcha]
</div>

Answer 2

您不能将CSS选择器用于iframe中的元素，但您可以设置iframe样式。

请参阅Css–selector for when a html-document is inside an iframe?

Answer 3

请查看this文章，作为选项：

[recaptcha size:compact]

Answer 4

对我来说没什么用，但这段代码

 [recaptcha class:col-md-6]

这是我的完整表单代码

<div id="content_container">
<p class="col-md-4"><label> Your Name (required)</label>
[text* your-name]</p>
<p class="col-md-4"><label> Your Email (required)</label>
[email* your-email]</p>
<p class="col-md-4"><label> Subject</label>
[text your-subject]</p>
<p class="col-md-12"><label> Your Message</label>
[textarea your-message]</p>
 [recaptcha class:col-md-6]
 <p class="col-md-6">[submit "Send"]</p>
</div>

Answer 5

此代码完美无缺

<div class=”g-recaptcha” data-sitekey=”XXXXXXXXXXXXX5oXXXXXX” style=”transform:scale(0.88);-webkit-transform:scale(0.88);transform-origin:0 0;-webkit-transform-origin:0 0;”>[recaptcha]</div>

在联系表格7中设置reCaptcha框的样式

5 个答案: