Styling textarea


I have read multiple similar questions but I want to stick to my component !

I have an app for which I am using text_area with disabled=True (content cannot be modified) but button is still active.
Because disabled=True the content is not that visible, I would therefore like to change the style of textarea by changing the font color. Is there a way to do that ? Can I go through .streamlit/config.toml ?

PS: I don’t want to go through st.markdown as I still need the button !

So by using in config.toml, I was able to change the background color of the text_area using secondaryBackgroundColor but textColor does not seem to have an impact on the font color when disabled=True

Does someone has a idea which one I should use ?


I need to figure out how to do this too, do you manage to figure it out?

:melting_face: I just realized my solution was just the opposite of that.

You can tweak the background-color or the background-image attributes of st.text_area playing with some css selectors. This method will override the colors set in the config.toml file though.


import streamlit as st

    .stTextArea [data-baseweb=base-input] {
        background-image: linear-gradient(140deg, rgb(54, 36, 31) 0%, rgb(121, 56, 100) 50%, rgb(106, 117, 25) 75%);
        -webkit-text-fill-color: white;

    .stTextArea [data-baseweb=base-input] [disabled=""]{
        background-image: linear-gradient(45deg, red, purple, red);
        -webkit-text-fill-color: gray;

disable_textarea = st.checkbox("Disable text area:")

    label="Text area:",
    value="This is a repeated sentence "*20,

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.