Hello guys,
I am trying to have a st.selectbox() where I am able to change the background color of specific items.
However, I do not want this to be applied to the other dropdown menus of my streamlit app.
Here is what I was able to do untill now:
import streamlit as st
ex_1 = st.sidebar.multiselect("Anything", ['Anything1', "Anything2", "Anything3"])
st.markdown(
"""
<style>
div[role="listbox"] li:nth-of-type(1){
background-color: red;
}
div[role="listbox"] li:nth-of-type(2){
background-color: blue;
}
</style>
""",
unsafe_allow_html=True,
)
ex_2 = st.sidebar.multiselect("Something", ['Something1', "Something2", "Something3"])
The problem with this approach is that my css style impacts both of my dropdown menus (ex_1 & ex_2). How would I be able to make it only impact ex_2?
Thanks in advance,
Clemacort
Hi,
Any update on this matter?
I’ve been toying with this idea for some time, but I’ve come to no avail.
Your choices are to:
Inspect the html and use a specifc class identifier that’s being generated for an element. I am always nervous about this approach as I am never sure how stable any such identifier is.
Use relative positions of things combined with nth-child
or nth-of-type
to grab a specific one.
I usually use the second option, often using a set of containers to create boundaries around sections of the app to help me reliably get to a specific place. For example:
If you are careful to put everything in containers up to the point of custom formatting, you can get away with an nth-of-type selector.
import streamlit as st
with st.sidebar.container():
st.write('This is container 1.')
with st.sidebar.container():
st.write('This is container 2.')
with st.sidebar.container():
st.write('This is container 3.')
with st.sidebar.container():
st.write('This is container 4.')
side = st.sidebar.radio('Highlight Sidebar Container',[1,2,3,4])
with st.c…