Change Input Text Font Size

[alex180500]

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!

[willhuang]

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.

[alex180500]

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

[blackary]

@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,
)

[arnaud]

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

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

[shellyanat]

Hi @arnaud ,

Changing the font-size of text input doesn’t work anymore in the latest versions of Streamlit. Do you have any advice on how to achieve this? I use streamlit 1.20.0. Thanks a lot in advance ^^

[blackary]

@shellyanat It works with a minor change in the css (adding p after label)

[cottontail]

If you’re looking to change input label font size, check out this Stack Overflow Q/A that lists two options.