How to change the multiselect default tag color?

Using Streamlit
,
1

Hi,
I’ve played around the streamlit for a while. I’ve found that using this code, I could change the properties.

/* change the select box properties */
div[data-baseweb="select"]>div {
  background-color:#fff;
  border-color:rgb(194, 189, 189);
  width: 50%;
}

/* change the tag font properties */
span[data-baseweb="tag"]>span {
  color: black;
  font-size: 17px;
 /* background-color:#fff; */   /* only turns part of the tag white */
}

image

However, how could I “hack” the default pink background-color? Thanks.

2

Have you tried using the theme functionality instead of directly using CSS?

https://docs.streamlit.io/en/stable/theme_options.html

Best,
Randy

3

Thank you @randyzwitch ,
The theming is awesome though, my application sticks to the default one. And I don’t see any example regarding the multi-select tags with themes. My question remains the same that is it possible to customize through CSS?

Regards,
woden

4

This would interest me as well. Very much! Any update on this topic?

5

This should work to change the entire background color of the tag itself:


span[data-baseweb="tag"] {
  color: black;
  font-size: 17px;
 /* background-color:#fff; */   /* only turns part of the tag white */
}
6

this worked for me:

.stMultiSelect [data-baseweb="tag"] {
    background-color: #FFF; 
}
7

You can do this with some CSS, and even assign different colors depending on the selected value (demo):

2024-10-22 8.29.19 p.m.

import streamlit as st

st.markdown("""
<style>
span[data-baseweb="tag"] {
  color: white;
  background-color: gray;
}

span[data-baseweb="tag"]:has(span[title="Yellow"]) {
  color: black;
  background-color: yellow;
}

span[data-baseweb="tag"]:has(span[title="Red"]) {
  color: black;
  background-color: red;
}

span[data-baseweb="tag"]:has(span[title="Green"]) {
  color: black;
  background-color: green;
}
</style>
""", unsafe_allow_html=True)

st.title('Changing multiselect color')

values = ["Green", "Yellow", "Red", "Blue", "Black"]
options = st.multiselect("What are your favorite colors", values, values)