Search code examples
pythonhtmlcssstreamlit

How to change background color of st.text_input() in streamlit?

I am trying to change the background color of st.text_input() box but unable to do so.

I am not from web/app development background or with any html css skills so please excuse my naive or poor understanding in this field.

So far I have tried: using this link

test_color = st.write('test color')

def text_input_color(url):
    st.markdown(
        f'<p style="background-color:#0066cc;color:#33ff33;">{url}</p>', unsafe_allow_html=True
    )

text_input_color("test_color")

Above code works on st.write() but not on st.text_input()

I have also come across this link so using this approach and I have modified css for Textinput instead of stForm but this also didn't work and I am not sure what id to use for text input

css="""
<style>
    [data-testid="stTextinput"] {
        background: LightBlue;
    }
</style>
"""

Below is the inspect element screenshot of the webapp:

text_input box image

Solution

  • I wouldn't rely on classes like .st-bd, .st-bb, or .st-b7 they are dynamically generated by Streamlit and can change (versions or runs). I would rather use aria-label.

    enter image description here

    import streamlit as st

st.markdown("""
<style>
    .stTextInput input[aria-label="test color"] {
        background-color: #0066cc;
        color: #33ff33;
    }
    .stTextInput input[aria-label="test color2"] {
        background-color: #cc0066;
        color: #ffff33;
    }
</style>
""", unsafe_allow_html=True)

st.text_input("test color")
st.text_input("test color2")