Changing background color of single number input and selectboxes

Hi,
I have a streamlit webApp and have several text input and selectbox widgets.
for example:

a = st.number_input(ā€œvalue aā€,value=0.5)
b = st.selectbox(ā€˜choose valueā€™,(ā€˜bā€™,ā€˜cā€™))

I want most of the widgets stay in standard gray but for some single ones I want to define the backgroudcolor by my self.

I found some ideas with st.markdown but could not realize it with my example.

Is it possible to change the backgroundcolor like this and do you have any ideas?

Thanks

Hey @Specht , welcome to the community

Let me preface this by saying the following is absolutely hard to maintain, even harder than the Markdown CSS Hack trickā€¦
But yeah Iā€™ve tried with CSS Selection alone but couldnā€™t find it out either. The only way of doing I found is by bypassing the components iframe:

import streamlit as st
import streamlit.components.v1 as components

a = st.number_input("value a", value=0.5)
b = st.number_input("value b", value=0.5)
c = st.number_input("value c", value=0.5)

components.html(
    """
<script>
const elements = window.parent.document.querySelectorAll('.stNumberInput div[data-baseweb="input"] > div')
console.log(elements)
elements[1].style.backgroundColor = 'red'
</script>
""",
    height=0,
    width=0,
)

I say unmaintainable becauseā€¦well certain styles and events may break the moment you leave the iframe sandbox for components + well I think you can see from the code anytime you change the app, youā€™ll need to re-edit the code.

I donā€™t usually recommend this but just so you know there is this workaroundā€¦

Have a nice day!
Fanilo

1 Like

Hey @andfanilo,
thanks for the quick reply. For the number input everything works fine. I tried to do the same for the selectbox but might not have the right variable name. I tried .stSelectBox instead of .stNumberInput but this doeas not work. Do you know what is the right variable to search for and is there a documentation where I can find all of them?

Have a nice day
Specht

CSS hacks for the dumb? - #3 by andfanilo : you can use your devtools inspector tab to find the correct class. CSS Classes change every now and then between versions and itā€™s not something we are really supposed to play with so thereā€™s no documentation on it

Also this should work: Can I change the color of the selectbox widget? - #2 by andfanilo

Sry I donā€™t have a Streamlit running to test so hope this will work :slight_smile:

Have a nice day,
Fanilo

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.