How to change the background of an expander?

How to change the background of an expander?

Hi guys, I have been working on a project using Streamlit and using an st.expander to show some information but I would like the expander background colour to be different (e.g. the expander background being white while the web page background is black). I was hoping one of you may have insight into doing this as i cannot find anything online?

1 Like

Hi @ERob,

Thanks for posting and welcome to the Streamlit Community Forum! :raised_hands:t5:

You can use custom CSS to modify the st.expander look. Here’s an example using your description:


import streamlit as st

# Custom CSS 
    .streamlit-expanderHeader {
        background-color: white;
        color: black; # Adjust this for expander header color
    .streamlit-expanderContent {
        background-color: white;
        color: black; # Expander content color

with st.expander("Expand"):
    st.write("Content inside the expander")

Happy Streamlit-ing! :balloon:


This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.