Description
Currently all widgets using 'select-box' cannot theme
the selected or hover item colors (foreground/background)
The the color is controlled by the platform. That overrides
normal CSS approaches/selectors.
After a bunch of research, I did figure out one solution
and made a prototype in a small electron app.
There appear to be three options:
1 - Some CSS guru knows of a better trick
2 - Use an input box on top of the current list widget
3 - Use something like I came up with:
one select box that is the normal drop-down with current selection
automatically includes the drop-down arrow
a second select box which can be made hidden/visible depending
on the first lightbox focus/selection
The second select box can be styled with option:checked and box shadow
option:checked {
color: #ffffff;
box-shadow: 0 0 10px 100px #905000 inset;
}
This box-shadow is the only thing I found that overwrites the platform colors
It does NOT work on a select box with only one item showing (nominal case)
That is what I came up with the two boxes and a bit of code to display and hide
the second box with the options list
I think option two is more complicated and inherits the unneeded list properties
if there is no option one , I would go ahead and prototype within VSC and do a PR
Thoughts ?