Customize st.text_area using CSS

🧩 Custom Components
,
1

hi! i’m trying to customize st.text_area to a specific width and height using CSS - but, it’s not being responsive to changes to width and height. is there an alternate approach that i can try?

def main():
    # Custom CSS to modify the textarea width and height
    custom_css = '''
    <style>
        textarea.stTextArea {
            width: 800px !important;
            height: 400px !important;
        }
    </style>
    '''

    st.write(custom_css, unsafe_allow_html=True)

    st.title("Custom Textarea Width and Height")
    user_input = st.text_area("Type your text here:")

    st.subheader("You typed:")
    st.write(user_input)

if __name__ == "__main__":
    main()
2

If you inspect the HTML, you’ll see that stTextArea is a class on a div. The textarea element is a few layers in. The selector you are looking for is .stTextArea textarea (at least for height).

import streamlit as st

css = '''
<style>
    .element-container:has(>.stTextArea), .stTextArea {
        width: 800px !important;
    }
    .stTextArea textarea {
        height: 400px;
    }
</style>
'''

response = st.text_area("Type here")
st.write(response)
st.write(css, unsafe_allow_html=True)