Styling textarea

[galleon]

Hello,

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 !

[galleon]

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 ?

Thanks

[Initial_DNA]

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

[edsaac]

@galleon

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

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

st.markdown("""
    <style>
    .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;
    }
    </style>
    """,unsafe_allow_html=True)

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

st.text_area(
    label="Text area:",
    value="This is a repeated sentence "*20,
    height=300,
    disabled=disable_textarea)