Streamlit: change the color of multiselect widget

Question

I have been trying to change the color of multiselect widget, specifically the color of choices (the orange color), which seems like this

but without any success. I found a discussion in here Streamlit: modify the multiselect tag background color, which changes colors of all elements of multiselect widget except for choices "boxes". Has anybody some idea how i could "override" the default color value?

What i also tried is to use

span[data-baseweb="tag"]>span:first-child {background-color:#272272 !important;}

but it only changes the middle part of the orange choice like this:

Answer 1

I see 3 ways of doing what you want. The 3rd way does exactly what you want but is more hacky that the 2 first.

---

Theming with .streamlit/config.toml

Use theming options via config file. You can see more details in the Streamlit docs about theming.

Modify ~/.streamlit/config.toml to include:

[theme]
primaryColor="blue"

Then, go on your Streamlit app, and click on the hamburger menu up right, then "Settings" > "Theme" and choose the "Custom Theme".

import streamlit as st

st.multiselect("Something", ["something1", "something2", "something3"])

st.checkbox("Enable autotune")

name = st.text_input("Enter your name")
st.markdown("Hello, {}!".format(name))

A downside is that it modifies every other widget color:

---

Theming via the Streamlit interface

Another way to do the same than the 1st proposition is to click on "Edit Active Theme" in the same menu as the first proposition.

---

Modify the css using css injection via st.markdown

A last way is to modify the style via markdown:

import streamlit as st

st.markdown(
    """
<style>
span[data-baseweb="tag"] {
  background-color: blue !important;
}
</style>
""",
    unsafe_allow_html=True,
)

st.multiselect("Something", ["something1", "something2", "something3"])

This one only modifies the choices colors of the st.multiselect widget and not the other widgets colors.