Format styles of selectbox

[mauermbq]

Summary

What a re the css style elements for select box?

In this case the hover is inverse to the background one the control, but font color does not change, so invisible when the hover bar is over the selection.

Tried some styles from base-web

div[data-baseweb="select"] ul li:hover {
        background-color: #f7b2a5;  /* change to desired bar color */
        color: white;  /* change to desired text color */
    }

However this does not affect the style here.

Steps to reproduce

Code snippet from config.toml:

[theme]
base="dark"
primaryColor="#778899"
backgroundColor="#FFFFFF"
secondaryBackgroundColor="#2d408d"
textColor="#2d408d"
font="sans serif"

[sai_krishna1]

Hi @mauermbq ,

Once check here:

Can I change the color of the selectbox widget?

Hello, I would like to be able to change the color of the selectbox widget from the default grey to white, here’s the code I’m using to customize every other component and it works perfectly. div[role="listbox"] ul { background-color: #ffffff; } i have this code in a seperate file (style.css), and im able to channge the color of text and everythinng, except for the selectbox. i tried this one, but didn’t work either: div[role="listbox"] option:first-child { background-color: #ffffff…

[mauermbq]

Hi @sai_krishna1 ,

what worked is to switch the border color.

.stSelectbox div[data-baseweb="select"] > div:first-child {
            background-color: #FFFFFF;
            border-color: #2d408d;
        }

That’s why the background in the selection field is white. However I still didn’ found the settings to influence the style of background and font color of the blue select bar.

Would be really helpful to have either a doc of the styles or a more fine granular control about the themes.