5

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

enter image description here

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:

enter image description here

vvvvv
  • 25,404
  • 19
  • 49
  • 81
stanly
  • 63
  • 1
  • 6
  • 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. – Chris W. Nov 04 '21 at 19:11
  • @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? – stanly Nov 04 '21 at 21:56
  • @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?? – stanly Nov 04 '21 at 21:57
  • I inspected this page for multiselect element: https://share.streamlit.io/panditpranav/svm_covid_tracking/main/COVID_app.py – stanly Nov 04 '21 at 22:15

1 Answers1

10

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".

Select "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:

The theme has been changed to blue-based instead of red

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 custom theme from graphic interface

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"])

Css based with markdown version that modifies background color of multiselect tags

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

vvvvv
  • 25,404
  • 19
  • 49
  • 81
  • 1
    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? } – stanly Nov 05 '21 at 11:00