Changes to selectbox theming with version >1.37

Using Streamlit
, ,
1

Hi, I have this custom theme in my application:

primaryColor=“#009940” (light green)
backgroundColor=“#f3f3f3”
secondaryBackgroundColor=“#002c1c” (dark green)
textColor=“#000000”

I have been using version 1.35 and 1.37 until now and in these versions the background of the selected item in the dropdown of selectbox widgets has been the primaryColor from the custom theme:

image
image361×325 9.07 KB

Now I need to update the app to version 1.38 to include some fixes on fragments, but I noticed that the background of the selected item changes to the secondaryBackgroundColor with this update:

image
image397×457 12.3 KB

This makes it hard to read the selected item. I can not change my theme since that would cause further changes to the app.

I don’t see any documentation about this change and I haven’t found any way to change it back, other than using custom css, which I haven’t managed to implement robustly.

Has anyone else experienced this or seen any justification for these changes to the selectbox theming?

2

I can’t reproduce a difference in how theme color is applied. Are you using any custom CSS? Can you share some executable code to demonstrate what is behaving differently between versions?

3

Hi,
I was using more custom CSS than I realized. I had this in a style.css file:

ul[data-testid="stVirtualDropdown"]>div>div>li[aria-selected="true"] {
    background: #901b25;
}

And with streamlit version 1.38, it had to be updated to stSelectboxVirtualDropdown.

Thank you for the help.

1 Like