I don't have knowledge of html/css and trying to change the color of text of a widget(toggle button) in streamlit app.
It is <p>Add Treatment Dates</p>
in the Image that I want to color it in white.
Code I have tried but didn't work:
st.markdown( """
<style>
[data-testid="stWidgetLabel"] {
color: white;
background-color: #111;
}
</style>
""", unsafe_allow_html=True)
st.markdown( """
<style>
[data-testid="stWidgetLabel"] p{
color: white;
background-color: #111;
}
</style>
""", unsafe_allow_html=True)
st.markdown( """
<style>
[data-testid="stWidgetLabel"] div{
color: white;
background-color: #111;
}
</style>
""", unsafe_allow_html=True)
st.markdown( """
<style>
div[data-testid="stWidgetLabel"] {
color: white;
background-color: #111;
}
</style>
""", unsafe_allow_html=True)
Try setting the !important
flag in your examples' colour property as follows :
st.markdown("""
<style>
[data-testid="stWidgetLabel"] p{
color: white !important;
background-color: #111;
}
</style>
""", unsafe_allow_html=True)
I have only set it in the second example. If this doesn't work you may try it in other examples. Usually, this happens because the colour property might be overridden by Streamlit itself. Using this flag will increase your declaration's priority.