Currency Switcher Dropdown Not Displaying Properly

[dhrumilk]

On the ​https://mercantile.wordpress.org/shop/(​https://mercantile.wordpress.org/shop/) page, when users try to switch the currency, the text is not visible because it appears as white text on a white background.

[mikinc860]

You can resolve this issue by explicitly setting the text color for the dropdown options using CSS. Add the following snippet to your custom CSS:

css
.currency-switcher-holder select option {
    color: #000000;
}

This ensures that the option text remains visible and does not inherit unwanted styles from the theme or other plugins.

[darshitrajyaguru97]

Replying to mikinc860:

You can resolve this issue by explicitly setting the text color for the dropdown options using CSS. Add the following snippet to your custom CSS:

css
.currency-switcher-holder select option {
    color: #000000;
}

This ensures that the option text remains visible and does not inherit unwanted styles from the theme or other plugins.

This is working correctly. After applying this style filter, the options are clearly visible.

[darshitrajyaguru97]

Patch attached.

[darshitrajyaguru97]

Patch attached. Tested in WordPress Playground using Mercantile blueprint. Fix ensures dropdown options are readable.

[dilip2615]

Hello @dhrumilk

We can fix this by setting the dropdown option text color via CSS. Add this to your custom CSS:

.currency-switcher-holder select option {
   color: #000000;
}

I think it is helpful for this bug issue.

[dilip2615]

Hello @dd32(Dion Hulse)
Could you please verify it?

[dd32]

No. Please don't ping for people to look at things :)

I can't duplicate it though.

This is browser/os-specific, something that was not included in the original report.

I've passed this along to those who work on it.

[dilip2615]

Extremely Sorry @dd32 , I will keep this thing in my mind.
I will never repeat this type of mistake.

Thank you 😊 🙏

Replying to dd32:

No. Please don't ping for people to look at things :)

I can't duplicate it though.

This is browser/os-specific, something that was not included in the original report.

I've passed this along to those who work on it.

[dhruvishah2203]

I have verified this page, and it seems to look good.

[softglaze]

Reproduction Report

Reproduced, with the environment detail @dd32 noted was missing in comment:6.

Environment

• Browser: Chrome 151.0.7922.169 (64-bit)
• OS: Windows 11 Pro N, build 26200
• Windows theme: dark
• Display: 200% scaling, devicePixelRatio 2
• Viewport: 1440x900
• Location: Multan, Pakistan. The store geolocated and defaulted to PKR.
• Date: 22 August 2026

Steps taken

1. Opened ​https://mercantile.wordpress.org/shop/ in Chrome with default settings.
2. Clicked the currency switcher in the header ticker.
3. 🐞 Bug occurs: the popup opens as a blank white rectangle. All 127 options are invisible except the one currently highlighted, which stays readable because Chrome paints the selection with system colours.
4. Enabled chrome://flags/#enable-force-dark, relaunched, repeated steps 1 and 2. The popup renders dark and every option is readable.

Additional Notes

The variable appears to be Chrome's Auto Dark Mode, not the operating system theme. Windows was in dark mode for both observations. The page never sets color-scheme, it computes normal on both html and body, so Chrome paints a light popup regardless of the Windows theme. Only force-dark overrides that.

This may also explain why a quick check looks fine. Exactly one row is always legible, the highlighted one, so opening the dropdown and glancing at it gives the impression that it works.

Where the white comes from: the <select> carries color: #ffffff; background-color: transparent in an inline style attribute and the options inherit it. No CSS rule anywhere on the site targets option, so the proposed rule would be the only one.

On the proposed patch. .currency-switcher-holder select option matches 254 nodes, being 127 options in each of two switchers, header and footer. Injecting it changes the computed option colour from white to black in both colour schemes. It does not repaint the closed control: with animations frozen, the header control's rendered pixels are identical before and after, 0 differing pixels over a 104x23 crop. So it does not swap one contrast problem for another on the dark bar.

Not tested: Windows High Contrast. forced-colors was false throughout. Worth asking the original reporter whether they were in High Contrast, and whether they had Auto Dark Mode on or off.

One caveat on versions. The default-Chrome observation was on 151.0.7922.169. Enabling the flag required a relaunch, which also applied a pending update, so the force-dark observation was on 151.0.7922.174. Both are Chrome 151, but it is not a same-build comparison.

Screenshots/Screencast with results

• 8241-popup-chrome-default-blank.png, default Chrome, popup blank, only the highlighted row visible
• 8241-popup-chrome-default-blank-pkr.png, the same in a second session with PKR highlighted instead of LRD
• 8241-popup-forcedark-readable.png, Auto Dark Mode enabled, all options readable