Material Design 3 dropdown does not show properly

[Marcus]

What I’m trying to do:
When I open a dropdown in an app based on Material Design 3 the background is green:

I would expect it to look something like this:
(Menus – Material Design 3)

What I’ve tried and what’s not working:

• Tried the app on my notebook, desktop and smartphone with Google Chrome and Firefox. It shows up green on all devices.
• Created a new Anvil app to rule out that I changed a setting.
• Tried to use the background property of the dropdown component. It has no effect aside from changing the background color of the dropdown in closed state.
• Other types of components seem to work fine.
• Tried various color schemes.

Clone link:
This is the test app I created the screenshot with:

Login

[stein]

Hi @Marcus,

here is a fix:

Material design 3 adjustments

Hi, I love the new Material 3, but there are two things that perhaps you could change: The green background in the drop down in Material Light color scheme Placeholder should probably look more like placeholders (?) See them demonstrated in this fresh material 3 app: Of course, I could adjust this myself, but I would prefer that the standard design was updated. Cheers, Stein

Cheers,
Stein

[Marcus]

Works perfectly! Thank you!

I think the design template should be fixed. It looks like a bug since it does not resemble material design 3. Using “green” as a fixed color seems like an odd choice that someone may have been chosen for debugging purposes.

[magorshunov]

The design template was fixed recently. I just replaced my CSS file with the new version. In the previous version, the following line was responsible for this behavior:

.anvil-dropdown select option {
background-color: green;
}