Changing background color of single number input and selectboxes

Using Streamlit
1

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

2

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,
)

image
image708×326 1.86 KB

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
3

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

4

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

5

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