Select Element Dropdown Background Color on Firefox is Unset

[zwubs]

Current Behavior

When utilizing a select element that only has the .select class applied, and clicking on it in Firefox the following can be observed:

There's what appears to be a strange white border around all of the options.

Expected Behavior

I'd expect the background of the select element's dropdown to be the same as the select element.

Environment Information

• System:
  • OS: Windows 11 10.0.26100
  • CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
  • Memory: 4.28 GB / 15.40 GB
• Binaries:
  • Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
  • Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
  • npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  • pnpm: 8.15.1 - ~\AppData\Roaming\npm\pnpm.CMD
• Browsers:
  • Edge: Chromium (133.0.3065.69)
  • Internet Explorer: 11.0.26100.1882
  • Firefox: 137.0.1 (64-bit)
• npmPackages:
  • @skeletonlabs/skeleton: ^3.1.2 => 3.1.2
  • @skeletonlabs/skeleton-svelte: ^1.2.1 => 1.2.1

Steps To Reproduce

1. Open the latest version of Firefox
2. Browse to the forms docs
3. Click on the default select element

Link to Reproduction / Stackblitz

https://www.skeleton.dev/docs/tailwind/forms#select

More Information

I did some investigation into why this is happen in v3 but not in v2. It looks like in v2 the background color of the select element is defined explicitly. In v3 it looks like Firefox doesn't handle transparent colors for the select dropdown and is defaulting to white. I was able to mitigate this in my own project by explicitly declaring the background color.

[Hugos68]

Can confirm and reproduce, thanks for reporting this.
@endigo9740 any ideas?

[endigo9740]

@zwubs I'd recommend reading the following to get a better understanding of the state of customizing Select elements via CSS. It's a lot worse than you might suspect. Especially given the age of the web.

• https://open-ui.org/components/customizableselect/
• https://developer.chrome.com/blog/rfc-customizable-select
• https://developer.chrome.com/blog/a-customizable-select

We're doing our best to customize the standard <select> element, but there are limitations cross-browser and cross operate system. Nearly every combination of browser and OS displays these elements differently. Even mobile Chrome/Safari do something different than their desktop counterparts.

We are very keen to opt into the customizable select in the future, using progressive enhancement techniques, but unfortunately there are some known issues in Svelte (and likely Solid.js):

https://bsky.app/profile/paolo.ricciuti.me/post/3lldwcfzom22u

As such, I've closed an issue for implementing these changes, and plan to revisit in the future. After this has had a bit more time to cook.

• Customizable Select for Chrome #3457

And you're right, in v2 we were attempting to control the hover state - but this required on a hack where we had to set it using a linear gradient with 2 shades of the same color. It didn't work well in all browser. And in the worse cases it didn't modify text color leaving users with in-accessible color contrast ratios. So in v3 we've opted to drop this and favor a11y above all else. But I do agree it's less visually appealing.

If you absolutely need full control over the look of this interface, I might suggest opting for a custom component instead or utilizing a piecemeal implementation of a single headless component, such Bits UI - which does offer a Select component:

https://www.skeleton.dev/docs/headless/bits-ui
https://www.bits-ui.com/docs/components/select

[endigo9740]

Note I'll leave this ticket open to see if we can perhaps do away with the super thick white outline.

@zwubs I'll need you to confirm the following so we can reproduce when testing:

1. What operating system are you on (version number too please)
2. What specific version of Firefox are you running - ideally latest

[Hugos68]

Open the latest version of Firefox

I think OP uses latest

[zwubs]

Thanks for the thorough reply @endigo9740! And completely agree, select elements are quite the mess currently 😅, especially as Firefox hasn't yet implemented some of the newer specs for them. I've gone ahead and added my environment information to the main post, so hopefully that should help!

[endigo9740]

Thanks guys. I'll aim to take a look at this asap and we'll see what we can do.

[endigo9740]

@zwubs @Hugos68 Note I was trying a few things here:

#3527

Unfortunately nothing I've adjusted seems to affect this element in Firefox for Windows. In Firefox for Mac OS it looks great. Not sure about Linux, as I don't have access to this. But sadly I don't think there's anything we can do to improve this.

The closest I found was this:

https://jsfiddle.net/lotusgodkk/RmfQ3/2/

Specifically:

.select :: -ms-expand {
    display: none;
}

This does provide a relatively nice looking native drop-down menu. But it also strips ALL of the CSS styling from the base element as well. The part you click to open with the arrow. So that won't do.

I'd welcome more suggestions on how to improve this. But or now, I'm afraid this is outside of our control. The custom select will help in the future, but I don't believe that's ready for primetime yet.

So here's my suggestions for alternatives in the meantime:

1. Don't use the Skeleton .select styles and add roll your own.
2. Roll your own custom Select component.
3. Building on number 2, integrate a component from a headless library such as Bits UI or Melt UI.