我正在尝试将 Select 元素设置为具有透明背景的样式，但在故障排除过程中，逻辑让我陷入了困境。
我们使用 Divi 作为我们的 WP 主题。 我们使用 Ninja Forms 作为我们的表单插件。
此时混合了两个字段，一个常规文本输入和一个选择字段。
我们为每个字段应用了一个自定义类。
我们对该类应用了以下指令:
.header_form_select {
background: transparent !important;
}
这里是故障排除的地方。当我们测试这种安排时，我们发现文本输入接受样式并且确实是透明的。选择，不是那么多。如果我们将 select field 元素移到它的父元素之外，样式确实会影响它。所以一定有什么东西覆盖了它，对吧？
但是，如果我们将它保留在父元素中(按照设计)，并将背景设置为红色而不是透明，它会按预期工作。似乎问题特别在于透明度和选择元素(因为它适用于文本输入)......
我似乎找不到任何信息来说明为什么它会成为围绕选择元素的怪癖，同时很难相信这是问题的根源，因为如果我们只是将它移到父元素之外，它有用吗……
任何帮助解开这个烂摊子的帮助都会非常棒。 :) 谢谢大家。
最佳答案
在 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是一个交易破坏者，您可以使用 native CSS rgba() 函数显式将子项设置为透明。
.child {
background-color: rgba(0, 0, 0, 0);
}
编辑:为清楚起见进行编辑(我希望)
关于html - 将 Select 元素设置为透明背景时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55153133/