CODEWITHSUNDEEP
cssstreamlit
Woden
Woden

Reputation: 1386

Streamlit: modify the multiselect tag background color

I've been using streamlit for a while, but still can't figure out how to change the background color of a multiselect tag. Is there any way to work around this property?

What I've tried is to inspect the elements, but found nothing to imrpove.

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

Upvotes: 0

Views: 1845

Answers (1)

vvvvv
vvvvv

Reputation: 31640

To modify the visuals of the multiselect, you can do:

import streamlit as st

st.markdown("""
<style>
/* The input itself */
div[data-baseweb="select"] > div {
  background-color: yellow !important;
  font-size: 23px !important;
}

/* The list of choices */
li>span {
  color: red !important;
  font-size: 35px;
  background-color: blue !important;
}

li {
  background-color: green !important;
}
</style>
""", unsafe_allow_html=True)

st.multiselect("foo", ["aaaaaa", "bbee ", "opeen Jej"])

Colors of the different options selected

Upvotes: 1

Related Questions