How can I change the metric box color and the inside font color?

A new version will change the dynamically generated CSS classes. Generally CSS classes that start with st or div attributes are considered a bit more stable because they are manually implemented. They may change on a version where the devs decide to change style guide, though this shouldn’t happen …

I figured it out: create a style. css file and get the metric’s css class name by inspecting the metric element. /* metric styling */ div.css-rikpzh.e1tzin5v3{ background-color: rgba(28, 131, 225, 0.1); border: 1px solid rgba(28, 131, 225, 0.1); padding: 5% 5% 5% 10%; border-radius: 5p…

I don’t believe this solution is stable as the classes, e.g., css-rikpzh e1tzin5v3, are not stable. They appear to be dynamically generated class names. Having said that, it’s all we have.

Not sure… but this issue has always been cited as a caveat of these CSS hacks.

Good to know @andfanilo ! So this is why some divs have a data-testid attribute. :thinking: Agree with you, and I’ve been using the st* div containers where I can.

One more question: @andfanilo why isn’t the stMetricValue working for me? /* breakline for metric text */ div[data-testid="metric-container"] > label[data-testid="stMetricLabel"] > div { overflow-wrap: break-word; white-space: break-spaces; } div[data-testid="metric-container"] > la…

Hello, would you please tell me how to put a thousand separators in metric value? [metric]

[image] R_D: div[data-testid="metric-container"] > label[data-testid="stMetricValue"] > div { font-size: large; } @R_D The reason this isn’t working is that the item with testid = stMetricValue isn’t a label, it’s a div (at least currently)

Hello all, I’m new here. I found this topic really interesting for my project. I would like to ask you, if anyone knows, if it is possible and how to change the colour of one specific container on the basis of a condition. Example: if the value of the metric is higher than a certain threshold, t…

I have the same question :slight_smile:

Change metric color, font, background and style

Using Streamlit

R_D May 18, 2022, 11:20am 4

@asehmi Does that mean the class names may suddenly change? What triggers the change?

Topic		Replies	Views
How to customise the metric component Using Streamlit discussion	2	962	November 29, 2024
Changing the text color of only one metric Using Streamlit	1	6309	January 1, 2023
Is it possible to change the font/background colour of a metric based on the value? Using Streamlit	4	4238	April 26, 2022
Apply Custom Metric Styling to only one section Community Cloud discussion	3	128	March 13, 2025
Center text in st.metric Using Streamlit	6	6117	June 18, 2023

Change metric color, font, background and style

Related topics