Base Input Style Changing Problem in Streamlit-CodePudding

st.write('This is an example', title)
st.markdown("<style>.stTextInput  > label {font-size:120%; font- 
weight:bold; color:white; background:linear-gradient(to bottom, 
#3399ff  0%,#00ffff  100%);border: 2px ;border-radius: 3px;} 
</style>",unsafe_allow_html=True) #for all text input sections

st.markdown("<style>.stbase-input  > label {font-size:120%; font- 
weight:bold; color:white; background:linear-gradient(to bottom, 
#3399ff  0%,#00ffff  100%);border: 2px ;border-radius: 3px;} 
</style>",unsafe_allow_html=True) #for all base input sections

Is there any way to reach to the base input section with CSS for CSS style changing ? Text input's css style changing is working.

CodePudding user response：

Here is a work around. Of course you are missing something out but your CSS should be in a <style> and properly formatted as well. I think this should solve your problem.

st.markdown("""
<style>
.stTextInput > label {
font-size:120%; 
font-weight:bold; 
color:white; 
background:linear-gradient(to bottom, #3399ff 0%,#00ffff 100%);
border: 2px;
border-radius: 3px;
} 
</style>
""", unsafe_allow_html=True)


# Notice some changes here
st.markdown("""
<style>
div[data-baseweb="base-input"]{ 
background:linear-gradient(to bottom, #3399ff 0%,#00ffff 100%);
border: 2px;
border-radius: 3px;
}

input[class]{
font-weight: bold;
font-size:120%;
color: white;
}
</style>
""", unsafe_allow_html=True)

You can also choose to put both to a single CSS instead of having to markdown one after another. Something like:

st.markdown("""
<style>
.stTextInput > label {
font-size:120%;
font-weight:bold;
color:white;
background:linear-gradient(to bottom, #3399ff 0%,#00ffff 100%);
border: 2px;
border-radius: 3px;
}

[data-baseweb="base-input"]{
background:linear-gradient(to bottom, #3399ff 0%,#00ffff 100%);
border: 2px;
border-radius: 3px;
}

input[class]{
font-weight: bold;
font-size:120%;
color: white;
}
</style>
""", unsafe_allow_html=True)