Different colours for multiselect options

[hienanhtran]

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!

[edsaac]

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.

Code:

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"]
    colorize_multiselect_options(colors)


if __name__ == "__main__":
    main()

[hienanhtran]

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

[edsaac]

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

[EmilHansen]

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.

[Sai_SaiGraph]

Is it possible to get options like this:
options = [*“apple bat cat … ……”]
so i n selectbox we have it appear like this please:
apple
bat
cat
…
…
…
Thanks for any help.

[edsaac]

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