I am trying to add custom outline to containers used in my app. I am familiar with the technique of applying custom CSS styles through markdown and have no issue with that. However, I am struggling to only apply styles to containers created with st.container() without affecting all the other containers that Streamlit generates on its own (e.g. when using tabs). Sadly, manually created containers have no âdata-testidâ attribute, unlike metrics and some other widgets. That wouldâve helped resolve the issue.
Basically, my question narrows down to this: How can I add a CSS outline to the container I am creating manually without affecting other widgets?
Let this be an example application:
st.write('text outside the container')
with st.container():
st.write('text inside the container')
Your idea is magnificent! Although, I would make some minor changes to the structure of the css selector so that it does not affect st.columns() grid
Turns out that the st.columns() method generates a similar hierarchy of divs. Luckily, there is a difference! Unlike those that compose a container, these divs are not direct children. So, a specific descendant-child order would make our thingy more precise This allows us to play with containers without affecting other widgets (as far as I can tell).
to who it may concern:
if you want to style a specific element you can create a css element with an id and then style it using the css âhasâ property. It works directly in edge and chrome, in firefox (v 109) you have to enable the css has selector in the config first.
st.write('''<style>
[data-testid="stHorizontalBlock"]:has(div.PortMarker) [data-testid="stMarkdownContainer"] p {
margin: 0px 0px 0.2rem;
color: #ff0000;
}
</style>''', unsafe_allow_html=True)
with st.container():
INcol1, INcol2 = st.columns(2)
with INcol1:
st.write('Test 1')
st.write("""<div class='PortMarker'/>""", unsafe_allow_html=True)
with INcol2:
st.write('Test 2')