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 */
}