如何自定义Streamlit的st.text_area宽高？CSS修改无效的替代方案

你的CSS设置未生效，大概率是选择器没有匹配到正确的DOM元素。以下是几种可行的替代方案：

方案1：修正CSS选择器，匹配正确DOM结构 #

Streamlit的st.text_area组件里，实际的<textarea>标签被包裹在带有stTextArea类的<div>容器内，需要调整选择器层级：

def main():
    custom_css = '''
    <style>
        /* 匹配stTextArea容器内的textarea元素 */
        .stTextArea textarea {
            width: 800px !important;
            height: 400px !important;
            min-height: 400px !important; /* 防止内容过少时高度收缩 */
        }
        /* 可选：调整外层容器宽度，避免textarea被容器限制 */
        .stTextArea {
            width: 800px !important;
        }
    </style>
    '''
    st.markdown(custom_css, unsafe_allow_html=True)  # 推荐用st.markdown替代st.write

    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：使用Streamlit原生参数（最简单） #

st.text_area本身提供height参数直接设置高度，宽度可通过st.columns控制容器宽度间接实现：

def main():
    st.title("Custom Textarea Width and Height")
    
    # 创建占页面80%宽度的列，控制textarea宽度
    col = st.columns([0.8])[0]
    # 直接设置height参数，无需CSS
    user_input = col.text_area("Type your text here:", height=400)

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

if __name__ == "__main__":
    main()

方案3：通过组件key精准定位单个组件 #

给st.text_area设置唯一key，通过key对应的DOM ID定位，避免影响其他组件：

def main():
    custom_css = '''
    <style>
        /* 通过key对应的ID定位目标textarea */
        #my_textarea textarea {
            width: 800px !important;
            height: 400px !important;
        }
    </style>
    '''
    st.markdown(custom_css, unsafe_allow_html=True)

    st.title("Custom Textarea Width and Height")
    # 设置唯一key参数
    user_input = st.text_area("Type your text here:", key="my_textarea")

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

if __name__ == "__main__":
    main()

内容的提问来源于stack exchange，提问作者Harryy