How to make label in st.multiselect bigger/bolder
Question:
I am looking to make the label of multiselect bigger / bolder, my code looks like this :
choice_mode = st.multiselect("Chose Mode", ['A','B','C'], default="*")
I have tried adding this :
st.markdown(".stTextInput > label {font-size:105%; font-weight:bold; color:blue;} ",unsafe_allow_html=True) #for all text-input label sections
st.markdown(".stMultiSelect > label {font-size:105%; font-weight:bold; color:blue;} ",unsafe_allow_html=True) #for all multi-select label sections
from this page : https://discuss.streamlit.io/t/the-problem-changing-label-font-of-text-input-and-multi-select/23329
but all it does is display the text on my app like so :
Am I doing this wrong? Could it be the streamlit version?
Answers:
You should wrap the css in <style>
. You can write both css in one markdown
instead of having to repeat yourself.
Note: It’s a good practice to keep your code properly formatted, that will save you headache in the long run, when you are looking to refacture the code.
st.markdown("""
<style>
.stTextInput > label {
font-size:105%;
font-weight:bold;
color:blue;
}
.stMultiSelect > label {
font-size:105%;
font-weight:bold;
color:blue;
}
</style>
""", unsafe_allow_html=True)
I am looking to make the label of multiselect bigger / bolder, my code looks like this :
choice_mode = st.multiselect("Chose Mode", ['A','B','C'], default="*")
I have tried adding this :
st.markdown(".stTextInput > label {font-size:105%; font-weight:bold; color:blue;} ",unsafe_allow_html=True) #for all text-input label sections
st.markdown(".stMultiSelect > label {font-size:105%; font-weight:bold; color:blue;} ",unsafe_allow_html=True) #for all multi-select label sections
from this page : https://discuss.streamlit.io/t/the-problem-changing-label-font-of-text-input-and-multi-select/23329
but all it does is display the text on my app like so :
Am I doing this wrong? Could it be the streamlit version?
You should wrap the css in <style>
. You can write both css in one markdown
instead of having to repeat yourself.
Note: It’s a good practice to keep your code properly formatted, that will save you headache in the long run, when you are looking to refacture the code.
st.markdown("""
<style>
.stTextInput > label {
font-size:105%;
font-weight:bold;
color:blue;
}
.stMultiSelect > label {
font-size:105%;
font-weight:bold;
color:blue;
}
</style>
""", unsafe_allow_html=True)