How to add css to specific Select box from a group of select boxes in the page?

[Tejasvi]

Hi,
I have seen examples on adding css to select boxes which gets applied to all of the selects in the page. how to apply CSS to specific select boxes in the page ? Is there a way I can add className or id to it and use it to apply css ? or any other suggestions please?

[edsaac]

Since version 1.39, you can use the component key to target individual elements (Allow setting CSS class on elements via `key` by lukasmasuch · Pull Request #9295 · streamlit/streamlit · GitHub). Basically, whatever key you use for an element, it will be prepended with st-key- and added as a class to the html tag containing the element. For example:

Code

import streamlit as st

css = """
.st-key-one{
    &:hover{
        background-color: red;
        border-radius: 10px;

        label{
            color: white;
            p{
                font-size: 2rem;
            }
        }
    }
}

.st-key-two label p{
            font-weight: bold;
        }
"""

st.html(f"<style>{css}</style>")

st.selectbox("No key passed", ["Value 1", "Value 2", "Value 3"])
st.selectbox("A key passed", ["Value 1", "Value 2", "Value 3"], key="one")
st.selectbox("Another key passed", ["Value 1", "Value 2", "Value 3"], key="two")

[Tejasvi]

Thank you @edsaac . I was on 1.34 and looking for it. this is helpful