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:
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
.
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")