Different colours for multiselect options

Hi everyone,
I’m trying to set my multiselect options with different colours (ex: option 1 - red, option 2 - blue, option 3-white, etc ). Does any one have any idea on how to do it?
Many thanks!

You probably need to target the CSS of the st.multiselect options. Here is an example to cycle through a list of colors. I am unsure how to fix each color to each particular option though.


import streamlit as st

def colorize_multiselect_options(colors: list[str]) -> None:
    rules = ""
    n_colors = len(colors)

    for i, color in enumerate(colors):
        rules += f""".stMultiSelect div[data-baseweb="select"] span[data-baseweb="tag"]:nth-child({n_colors}n+{i}){{background-color: {color};}}"""

    st.markdown(f"<style>{rules}</style>", unsafe_allow_html=True)

def main():
    options = [*"🍿🐈🍳🌡🍍🌺"]
    selection = st.multiselect("Pick an option", options)

    if selection:
        st.info(f"""Selection is: {" ".join(selection)}""")

    ## Number of colors does not need to match the number of options
    colors = ["darkcyan", "mediumpurple", "tan"]

if __name__ == "__main__":

1 Like

Can I fix colour for each option: option 1 - red, option 2 - blue, option 3-white? (option alwasy red, option 2 always blue)

Not with just a CSS injection afaik. That would be a good feature request that you could make.

I’m looking to do this aswell.
This could not only be a nice visual customization feature, but also enhance the UX. E.g. the bars in this bar chart and the respective multiselect options would have matching colors, providing the user with a instant visual cue of which options to select/deselect.

Is it possible to get options like this:
options = [*β€œ:popcorn:apple :cat2:bat :fried_egg:cat :cactus:… :pineapple:…:hibiscus:…”]
so i n selectbox we have it appear like this please:
Thanks for any help.

Sure, just use a regular list with the options, instead of the *splat syntax I was using in the other example

options = ["🍎 apple", "πŸ¦‡ bat", "🐈 cat"]
1 Like