css 在联系人表单7中设置reCaptcha框的样式

3pmvbmvn  于 2023-01-22  发布在  其他
关注(0)|答案(6)|浏览(161)

我正在寻找风格的谷歌reCaptcha（v2-与复选框之一），这是在联系表单7 WordPress插件的短代码生成。
包含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样式__ltr.css，无论我尝试什么，它都必须覆盖我的CSS。
有人能帮帮我吗？
先谢了

css

6条答案

按热度按时间
q7solyqu

q7solyqu1#

只需将此代码放入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>
赞(0）分享  回复(0）举报  2023-01-22
rmbxnbpk

rmbxnbpk2#

您不能对iframe内部的元素使用CSS选择器，尽管您可以设置iframe本身的样式。
参见Css–selector for when a html-document is inside an iframe?

赞(0）分享  回复(0）举报  2023-01-22
6ojccjat

6ojccjat3#

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

[recaptcha size:compact]
赞(0）分享  回复(0）举报  2023-01-22
bcs8qyzn

bcs8qyzn4#

除了这个密码什么都没用

[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>
赞(0）分享  回复(0）举报  2023-01-22
at0kjp5o

at0kjp5o5#

此代码工作完美

<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>
赞(0）分享  回复(0）举报  2023-01-22
bgibtngc

bgibtngc6#

这段代码也是唯一对我有效的，和@Entorno Web评论的一样。我的评论是2023年1月18日的。这是唯一有效的代码。
我会说我正在CF 7版本上工作：5.5.6.1
我的版本是Contact Form 7的回滚版本，因为我集成CF 7提交的地方不适用于最新的更新。
代码I：

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

如果您以这种方式使用它，它将无法工作：

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

由于某种原因，当您在第一行添加〈div class=，并在下一行使用[captcha]，在最后一行使用时，它不起作用...这就是我通常将代码输入Contact Form 7的方式，但由于某种原因，您必须将代码作为一个字符串放置，而不会生成新行。

赞(0）分享  回复(0）举报  2023-01-22
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com