Can I change the color of the selectbox widget?

🎈 Using Streamlit
1

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;
}

anyone knows if this is possible?

1 Like
2

Hello @Raffal_Shafiei

Not sure I understood the question exactly :slight_smile: so I played around, here’s what happens when I use your style.css

body {
    background-color: lightgoldenrodyellow;
}

div[role="listbox"] ul {
    background-color: red;
}

image
image851×486 7.32 KB

Seems the actual selectbox div is in another div and not next to the ul, with databaseweb=select attribute, so I added

div[data-baseweb="select"] > div {
    background-color: chartreuse;
}

image
image820×479 8.19 KB

Is the green part what you desired to aim?

Do note that custom theming is around the corner, and hopefully it’ll help us refactor this better!

Cheers,
Fanilo

4 Likes
3

yes! exactly. the green part is what I was trying to edit.
Thank you so much!

2 Likes
4

Hi again! @andfanilo
There’s another widget that I’m having trouble with… the radio button, how can i change the color of it too?
I have this also, in my style.css file:

div.row-widget.stRadio > div {
    flex-direction: row;
    align-items: stretch;
}

it works fine! all my radio buttons are displayed horizontally exactly the way i want, but when i tried to change the color from the default bright pink to any other color, i failed.

i also tried these:

div.row-widget.stRadio > div::after {
    background-color: blue;
}

/* When the radio button is checked, add a blue background */
div.row-widget.stRadio > div input:checked ~ .checkmark {
    flex-direction: row;
    align-items: stretch;
    background-color: #2196F3;
}

they both didn’t work.

I hope you can help me fix this one too.
Thanks for your help!

1 Like
5

What are you making me do :rofl: it’s like we’re hackers!

body {
    color: #fff;
}

div.row-widget.stRadio > div {
    flex-direction: row;
    align-items: stretch;
}

div.row-widget.stRadio > div[role="radiogroup"] > label[data-baseweb="radio"] > div:first-child {
    background-color: blue;
}

image
image1097×465 37.7 KB

I think your CSS targeted the yellow div but the radio is one children deeper on the blue selected. You can use the CSS inspector of your browser to pretty much select any element and see its structure ;).

I’m cheating a bit here because the color is always changed for all radios whether selected or not. I’m not yet sure we can do a CSS selector looking for a checked input at the same depth level. I think it’s possible but I’ll have to look into CSS again !

3 Likes
6

Thank you so much for your help! and sorry for my late response. :slightly_smiling_face:

I didn’t know about the CSS inspector, thanks for teaching me this.

2 Likes