Change Input Text Font Size

Hello, I was wondering if there was a way to change the font size of st.text_area, st.text_input or st.number_input.

My goal is to make something like a 2FA confirmation page so to have big boxes where you can write big numbers.

Thanks in advance!

Hi @alex180500 , I don’t think there is a current way to change the font size for those components. However, you could create something with the html component (Components API - Streamlit Docs). I don’t think we currently support that right now. However, you can try creating an enhancement on the issues page (Issues · streamlit/streamlit · GitHub) and try to get people to react / comment as we do use those to prioritize certain things.

1 Like

I’ll try something.
Btw I’ve created the feature request here Change Font Properties in Input Boxes · Issue #5268 · streamlit/streamlit · GitHub

@alex180500 Though not an ideal solution, you can use css to change these sizes

st.text_area("Write some text")
st.text_input("Write some text")
st.number_input("Write some number")

# Add css to make text bigger
st.markdown(
    """
    <style>
    textarea {
        font-size: 3rem !important;
    }
    input {
        font-size: 3rem !important;
    }
    </style>
    """,
    unsafe_allow_html=True,
)
1 Like

Here’s a way to change exactly those three widgets label sizes (and color, just to emphasize). Of course, colors are dubious and I don’t recommend keeping them :smile:

See code here https://playground.streamlitapp.com/?q=inputs-custom-css (also leveraging some hacky CSS)