recaptcha 被 CSS 样式覆盖

Question

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

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

我已将其范围缩小到下面的 body div 样式，这些样式会改变重新验证码的显示方式：

#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;
}

我怎样才能让这些停止改变recaptcha的出现方式？

非常感谢您的宝贵时间， 詹姆斯

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_widget_div 的 css 中添加 margin-left 来将 recaptcha 向右移动，以显示在您需要的位置。但是，您可能必须根据用户视口的宽度以不同方式处理该部分。