Custom background-color of selectbox elements

🧩 Streamlit Components
1

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

2

Hi,

Any update on this matter?

I’ve been toying with this idea for some time, but I’ve come to no avail.

3

Your choices are to:

  1. 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.
  2. 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: