Hello, so I’m new to Streamlit and I built my first web app. I added some CSS to the buttons but I can’t figure out how to remove the red color of the borders when the buttons are clicked.
You can adjust the general site colors using a config.toml file: Theming - Streamlit Docs. The primaryColor setting modifies that red halo. Imo, styling using CSS modifiers should be a later resource for more specific behaviors (e.g., hovering on buttons). Here is an example:
app.py
import streamlit as st
st.markdown("""
<style>
.stButton button {
background-color: white;
font-weight: bold;
width: 50px;
border: 2px solid green;
}
.stButton button:hover {
background-color:#018749;
color: black;
}
</style>
""", unsafe_allow_html=True)
with st.sidebar:
"## This is the sidebar"
cols = st.columns(5)
for i,col in enumerate(cols):
with col:
st.button(f"{i}", key=f"btn_{i}")