Personalize the color of tags in streamlit

Question

Personalize the color of tags in streamlit

As a newcomer to streamlit, I am experimenting with creating an application that incorporates multiple tag objects. By default, the tags are displayed in red, but I would like to customize the colors for each tag based on its category. For example, I want tags related to platforms to be shown in blue and tags related to amounts in purple.

https://i.stack.imgur.com/3llxf.png

I attempted to use a style.css file and import it into my main file, but the styles don't seem to be applied correctly.

div.element-container css-3u772n e1tzin5v2 {
   background-color : #50C878;
}

with open('style.css') as f:
   st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

col7, col8= st.columns([2.5, 2.5])
with col7:
   platform = st_tags(
         value= ["Carousell"],
         maxtags=3,
         suggestions=["Carousell"],
         label="Platform",
      )

If you could provide some advice on effectively working with CSS styles, I would greatly appreciate it.

html css streamlit

Answer 1

Answer №1

To customize the appearance of select options, I utilized st.multiselect and incorporated custom CSS directly onto the page. By defining rules for each specific option, it is possible to change the styling based on specific criteria. For instance, checking if a span element contains a child span with a matching title attribute, allows for dynamically coloring the parent element.

import streamlit as st

possible_platforms = ["Carousell", "Foo", "Bar"]
possible_amounts = [">$300", "<=$300"]

for pfm in possible_platforms:
    st.markdown(
        f"""
    <style>
    span[data-baseweb="tag"]:has(span[title="{pfm}"]) {{
    background-color: blue !important;
    }}
    </style>
    """,
        unsafe_allow_html=True,
    )

for amount in possible_amounts:
    st.markdown(
        f"""
    <style>
    span[data-baseweb="tag"]:has(span[title="{amount}"]) {{
    background-color: purple !important;
    }}
    </style>
    """,
        unsafe_allow_html=True,
    )

st.markdown("Report Category Specific Parameters")

st.multiselect("Platform", possible_platforms)
st.multiselect("Amount", possible_amounts)

https://i.stack.imgur.com/Q1zdQ.png

Note: The has pseudo-class is compatible with most browsers except Firefox. You can check browser support here.

Answer 2

To customize the appearance of select options, I utilized st.multiselect and incorporated custom CSS directly onto the page. By defining rules for each specific option, it is possible to change the styling based on specific criteria. For instance, checking if a span element contains a child span with a matching title attribute, allows for dynamically coloring the parent element.

import streamlit as st

possible_platforms = ["Carousell", "Foo", "Bar"]
possible_amounts = [">$300", "<=$300"]

for pfm in possible_platforms:
    st.markdown(
        f"""
    <style>
    span[data-baseweb="tag"]:has(span[title="{pfm}"]) {{
    background-color: blue !important;
    }}
    </style>
    """,
        unsafe_allow_html=True,
    )

for amount in possible_amounts:
    st.markdown(
        f"""
    <style>
    span[data-baseweb="tag"]:has(span[title="{amount}"]) {{
    background-color: purple !important;
    }}
    </style>
    """,
        unsafe_allow_html=True,
    )

st.markdown("Report Category Specific Parameters")

st.multiselect("Platform", possible_platforms)
st.multiselect("Amount", possible_amounts)

https://i.stack.imgur.com/Q1zdQ.png

Note: The has pseudo-class is compatible with most browsers except Firefox. You can check browser support here.

Personalize the color of tags in streamlit

Answer №1

Similar questions

CSS background image referencing in React to the public folder's path

Fixing the slide bar in React using styled components

The same HTML/CSS appears with varying appearances

How can I display just the time portion of a date in AngularJS?

The layout of the table is not formatted in a single continuous line

Display Email content within a bootstrap modal using CSS styling

Utilizing Selenium IDE and XPath to confirm that a checkbox is selected only when the associated label contains certain text

uniformly distribute the list items on the horizontal navigation bar

The vertical-align property in CSS fails to function properly when applied to specific rows or columns within the

Enter the variable into the parameter

Unlimited scrolling feature on a pre-filled div container

`Slide bootstrap carousel without moving other elements`

Can a time duration be applied to the background image of a DIV element?

Switching images between mobile and desktop view in responsive mode is a useful feature for optimizing

Mobile video created with Adobe Animate

Exploring the Possibilities of Personalizing Data Tables

Learn how to smoothly scroll to the top of a div by clicking on a team name

Want to learn how to create a draggable uploaded image on a canvas, similar to the functionality of Google

<ol><li>Arranges elements in a peculiar way if the image is aligned to the left</li></ol>

What is the solution to incorporating a scrollbar in a popup when I increase the zoom level?