Change red outline of buttons

🎈 Using Streamlit
,
1

Summary

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.

Steps to reproduce

button.css-1prua9e.edgvbvh9 {
  background: #white;
  color: black;
  font-weight: bold;
  width: 50px;
  border: 2px solid #000000; /* Black */
}

button.css-1prua9e.edgvbvh9:hover {
    background-color: #4CAF50;
}

button.css-1prua9e.edgvbvh9:focus {
   background-color: #4CAF50;
   color: black;
   border: 2px solid #000000; /* Black */
}

Expected behavior:
I tried the setting the outline and border properties to none with no luck.

Actual behavior:

I need to be able to change the color of the red border once a button is clicked for all buttons.
Screenshot 2022-10-21 133316

Links

1 Like
2

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}")
.streamlit/config.toml 
[theme]
base="light"
primaryColor="#018749"
backgroundColor="#FFFFFF"
secondaryBackgroundColor="rgba(245, 40, 145, 0.10)"

colorStyling

2 Likes
3

Thank you so much, that solved the problem!

1 Like