Readability issue with dark backgrounds in Firefox #7
Description
Noting an issue I ran into building a JS-driven select replacement and testing this technique as an alternative (95% there).
Firefox uses the background CSS property for the select button and the menu which appears under interaction. This approach removes the background on select inputs:
.custom-select select {
background: none;
}
This allows the input to be invisible and users see the .custom-select wrapper's styling. But this makes Firefox (taxingly) fallback to using the body background for the menu options background. Example:
I haven't found a fix other than don't use this technique on dark sites. In my JS-approach the select has opacity:0; background:#FFF; which forces Firefox to use a readable background, but this isn't possible here because the technique must render the select's text visibly.
