Skip to content

UI Theme Add: select-box(drop downs) selection and hover colors #25965

Closed
@cleidigh

Description

@cleidigh

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.

image

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 ?

image

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions