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:

Gamone

I'm not too familiar with streamlit, but if there isn't a direct way mentioned in the docs then you should always at least be able to inspect the element, find the css classes that are providing those values, and override them via specificity selectors or !important to be whatever you like. – Georgia

@vinzee Hi, actually I added the wrong link to my question. I wanted to add your discussion. But, when it only change the colour of all element except for the "orange" choices. I was trying yo use this code "span[data-baseweb="tag"]>span:first-child { background-color:#272272 !important; }" but it only changes middle part of the orange colour. I inspected element as Chris W. suggested but the only thing I got by the code which i write is change of color of the middle part. Don't you have some experience with this thing? – Gamone

@vinzee I already change the link in my question to your discussion.....Btw, sorry i would like to add the pic i got in my previous comment, but it seems like i cant in the comments?? – Gamone

I inspected this page for multiselect element: share.streamlit.io/panditpranav/svm_covid_tracking/main/… – Gamone

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.

Collinear

Perfect, the third way is precisely what i was looking for. Thank you a lot. If i could ask, how would be possible to change the color of hoovering border, which is now "red"? I was doing something like this 'div[data-baseweb="select"] > div:first-child { border: 1px solid #272272 !important;' but it only changes it to solid, and i dont know how to change the hoovering borger? } – Gamone