Question

我正在尝试设置Select元素的样式以使其具有透明背景，并且在故障排除期间，逻辑使我陷入了困境。

我们使用Divi作为我们的WP主题。我们正在使用Ninja Forms作为我们的表单插件。

此时，两个字段混合在一起，分别是常规文本输入和选择字段。

我们对每个字段都应用了一个自定义类。

我们对该类应用了以下指令：

.header_form_select {
    background: transparent !important;
  }

这是故障排除所在的地方。当我们测试这种安排时，我们发现文本输入接受样式并且确实是透明的。选择，没有那么多。如果将选择字段元素移到其父元素之外，则样式会影响它。所以一定要覆盖它，对吧？

但是，如果我们将其保留在父元素中（如设计的那样），并且将背景设置为红色而不是透明，则可以按预期工作。看来麻烦特别是与透明度和select元素有关（因为它在文本输入中可以正常使用）...

我似乎找不到任何关于为什么它会成为围绕选择元素的怪癖的信息，同时，我们很难相信这是问题的根源，因为如果我们将其移到该父元素之外，可以工作...

任何帮助弄清这种混乱的方法都将非常棒。 :)谢谢大家。

Answer 1

在CSS中，如果父元素具有设置为显式值的相同属性，则将覆盖设置为其默认值的属性。

这称为inheritance。

就您而言，我怀疑select元素在您使用transparent时是从父级继承样式，因为这是background-color的默认值。

.parent {
  background-color: blue; //explicitly-set value on parent
}

.child {
.background-color: transparent //default value; will be overridden by parent
.background-color: red //explicitly-set value, will NOT be overidden by parent
}

除非browser support是一个破坏交易的对象，否则您可以使用本机CSS rgba（）函数将子级明确设置为透明。

.child {
  background-color: rgba(0, 0, 0, 0);
}

编辑：为清晰起见（希望如此）

Answer 2

!important是一种非常激进的覆盖样式的方法，但是即使这还不足以覆盖样式，通常是因为主题/插件正在使用更具体的选择器来通过{{1 }} 标签。

可能看起来像这样；

!important

与覆盖样式相比，您必须使用同等或更具体的选择器。如果在select元素上运行“ inspect element”，则可以查找覆盖background属性的内容并将该选择器复制到样式表中。这应该足以覆盖，因为在主题样式之后加载了自定义样式表。如果不是，只是将其调整为更具体，例如为选择元素使用ID。

无法为Select元素设置样式，以使其具有透明背景

2 个答案: