Question

我正在尝试将recaptcha插入到我网站上的表单中。

我的CSS覆盖了repaptcha小部件的样式并使其看起来很糟糕。

我把它缩小到下面的身体div样式，改变了recaptcha的出现方式：

#body #content div {
    width :960px;
    background :transparent url("../images/bg-content-bottom.png");
    background-position :center bottom;
    background-repeat :no-repeat;
    padding-bottom :22px;
}
#body #content div div {
    width :860px;
    padding :10px 50px 20px 50px;
    background :transparent url("../images/bg-content.png");
    background-position :center center;
    background-repeat :repeat-y;
}

如何让这些停止改变重新出现的方式？

非常感谢你的时间，詹姆斯

Answer 1

出于这个原因，使用像这样的全局选择器并不是一个好习惯，你的div选择器不够具体，所以样式被验证码代码继承。

有关编写更好的CSS的一些提示，请参阅此处：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

您应该更加具体地使用样式选择器，并将类放在您的子元素上，如下所示：

#body #content .container {
    width: 960px;
    background: transparent url("../images/bg-content-bottom.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 22px;
}

#body #content .container .pageContent {
    width: 860px;
    padding: 10px 50px 20px 50px;
    background: transparent url("../images/bg-content.png");
    background-position: center center;
    background-repeat: repeat-y;
}

或者，作为快速修复，您可以覆盖验证码的样式，虽然这实际上不是理想的解决方案，因为!important声明将导致这些元素覆盖这些元素的任何其他样式。

#recaptcha_widget_div,
#recaptcha_widget_div div {
    width: auto !important;
    padding: 0 !important;
    background: none !important;
}

#recaptcha_widget_div a {
    font-size: 1.0em !important;
}

Answer 2

使用浏览器的“检查元素”功能查找recaptcha元素的唯一选择器。为该元素创建一个特定的css规则，并覆盖使您的显示难看的部分。

试试这个css：

#recaptcha_privacy{font-family:helvetica, sans-serif!important;font-size:8pt!important;
#recaptcha_widget_div{padding:0!important;}

可能需要也可能不需要！important。你可以将recaptcha移到右边，通过向recaptcha_widget_div的css添加margin-left来显示你需要的地方。但是，您可能必须根据用户视口的宽度不同地处理该部分。

recaptcha被CSS样式覆盖

2 个答案: