Customizing the appearance of Tabs

Using Streamlit
1

Customizing the appearance of st.tabs

The code below shows an example of how to customize the appearance of st.tabs using CSS. Hopefully somebody finds this helpful!

st.markdown("""
<style>

	.stTabs [data-baseweb="tab-list"] {
		gap: 2px;
    }

	.stTabs [data-baseweb="tab"] {
		height: 50px;
        white-space: pre-wrap;
		background-color: #F0F2F6;
		border-radius: 4px 4px 0px 0px;
		gap: 1px;
		padding-top: 10px;
		padding-bottom: 10px;
    }

	.stTabs [aria-selected="true"] {
  		background-color: #FFFFFF;
	}

</style>""", unsafe_allow_html=True)
8 Likes
2

Hi @Dallas,

Thanks for sharing this with the community!

3

Is there any way to change the appearance of specific tabs or tab lists appearing on the same page, without the markdown affecting all of them? For example, if I have a tab list in column 1, and another in column 2, could I style them differently?

4

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