Skip to content

Instantly share code, notes, and snippets.

@asehmi
Created March 5, 2023 23:25
Show Gist options
  • Save asehmi/eea4a7b8ee93616b19e3cc850e293de9 to your computer and use it in GitHub Desktop.
Save asehmi/eea4a7b8ee93616b19e3cc850e293de9 to your computer and use it in GitHub Desktop.
Streamlit change button background colour
# Ref: https://discuss.streamlit.io/t/issues-with-background-colour-for-buttons/38723/2?u=asehmi
import streamlit as st
import streamlit.components.v1 as components
def ChangeButtonColour(widget_label, font_color, background_color='transparent'):
htmlstr = f"""
<script>
var elements = window.parent.document.querySelectorAll('button');
for (var i = 0; i < elements.length; ++i) {{
if (elements[i].innerText == '{widget_label}') {{
elements[i].style.color ='{font_color}';
elements[i].style.background = '{background_color}'
}}
}}
</script>
"""
components.html(f"{htmlstr}", height=0, width=0)
cols = st.columns(4)
cols[0].button('first button', key='b1')
cols[1].button('second button', key='b2')
cols[2].button('third button', key='b3')
cols[3].button('fourth button', key='b4')
ChangeButtonColour('second button', 'red', 'blue') # button txt to find, colour to assign
ChangeButtonColour('fourth button', '#c19af5', '#354b75') # button txt to find, colour to assign
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment