skeletonlabs
`select` menu contrast is not accessible on Firefox
Current Behavior
Expected Behavior
No response
Steps To Reproduce
No response
Link to Reproduction / Stackblitz
No response
Environment Information
No response
More Information
No response
A fix for this has been identified, but it may result in a breaking change for users and will need to come as part of a major release.
.select,
.input,
.textarea,
.input-group {
background-color: var(--color-surface-50-950);
color: var(--color-surface-950-50);
}
By applying a background color and text color on the <select> itself, rather than transparent, results in a much better display for Windows-base browsers. Especially Firefox for Windows:
As such, we're going to add a note able this fix in the Forms docs, then apply the fix permanently in the next major release of Skeleton.
That does solve the problem on Firefox on Windows but Chromium based browser still show incorrect style
@absktoday yeah we're still not completely satisfied with this. But we're prepping to go through a big review of our style implementation in our next major release. And we'll plan to revisit this then. Our primary goal with this issue was to get the select back in a working state. It was pretty busted after recent browser changes triggered the original issues reported here.
We'll need to use techniques like this to affect Chrome-based browsers: https://developer.chrome.com/blog/a-customizable-select
But given how new this feature was, we didn't want to fully commit yet. Give it a bit more time for browser adoption to move forward.
If it's something you need immediately, consider creating your own alternative to the .select class that includes this.