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

Question

I'm trying to style a Select element to have a transparent background, and during troubleshooting the logic has run me in a circle.

We use Divi as our WP theme. We are using Ninja Forms as our forms plugin.

Two fields in this mix at this point, a regular text input and the select field.

We applied a custom class to each of those fields.

We applied the following directive to that class:

.header_form_select {
    background: transparent !important;
  }

Here's where the troubleshooting went in circles. When we test this arrangement we find that the text input accepts the styling and is indeed transparent. The select, not so much. If we move the select field element outside of it's parent element the styling DOES affect it. So something must be overwriting it, right?

However, if we keep it within the parent element (as designed), and style the background to be red instead of transparent it works as expected. It seems the trouble is specifically with transparency AND the select element (since it works fine with the text input)...

I can't seem to find any information on why it would be a quirk around select elements, and at the same time it's hard to believe that's the root of the problem since if we just move it outside of that parent element it DOES work...

Any help untangling this mess would be super great. :) Thanks everyone.

Answer 1

In CSS, a property set to its default value will be overridden if the parent element has the same property set to an explicit value.

This is called inheritance .

In your case, I suspect the select element is inheriting styles from the parent when you use transparent because that is the default value of 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
}

Unless the browser support is a deal-breaker, you can use the native CSS rgba() function to explicitly set the child to be transparent.

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

EDIT: edited for clarity (I hope)

Answer 2

!important is a pretty aggressive way to override styles, but if even that's not enough to override then it's typically because the theme/plugin is using an even more specific selector to change the select background with the !important tag.

It might look something like this;

.parent select.elementclass {
  background: #ffffff !important;
}

You'll have to use an equally or more specific selector than the overriding style. If you run 'inspect element' on the select element, you can find what's overriding the background property and copy that selector into your stylesheet. That should be enough to override as custom stylesheets are loaded after theme styles. If not just tweak it to be more specific, eg use an ID for the select element.