Dark Mode - Passenger Showcase Form broken (Windows)

[dipamsen]

Is it just me?

[fturmel]

Fun... Is this Firefox on Windows? I think it's the only browser that inherits some styles from the <select> element while rendering <option>. It's the first time I notice the font can change too (it doesn't behave this way on macOS).

These are usually not stylable elements. Other browsers on macOS, Android and iOS I believe just render <option> elements with default system styles and only change colors based on the OS dark mode preferences which is outside of our control.

There's some good content about select/option behavior on MDN as usual:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#styling_with_css
https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling#selects_and_datalists

Are you able to fix it by applying an explicit background-color value with .form select {} or .form select option {}?

[shiffman]

Yes, can confirm the issue does not show up on macos chrome or firefox!

[dipamsen]

I see this issue in Windows - chrome and firefox.

Screenshot from firefox:

EDIT: fixed in both, by appling select { background-color: ... }

[Yashasewi]

Is this fixed, or should I check into this issue ? @dipamsen

[dipamsen]

@Yashasewi well i have identified the fix, which is to explicitly put a background-color property to the select element. It hasn't been PR'ed yet however. Feel free to do so as I won't be able to get to it this week.

[Yashasewi]

Sounds good! I'll make a PR for this by this evening.