How to style a SelectBox?

Using Streamlit
4

Another option is to inject a short js script with st.components.v1.html to do the styling:

image
image960×338 6.04 KB 

import streamlit as st

def color_selectbox(n_element:int, color:str):

    js = f'''
    <script>
    // Find all the selectboxes
    var selectboxes = window.parent.document.getElementsByClassName("stSelectbox");
    
    // Select one of them
    var selectbox = selectboxes[{n_element}];
    
    // Select only the selection div
    var selectregion = selectbox.querySelector('[data-baseweb="select"]');
    
    // Modify the color
    selectregion.style.backgroundColor = '{color}';
    </script>
    '''
    st.components.v1.html(js, height=0)

chosen1 = st.selectbox("Menu 1", ["Option1.1", "Option1.2", "Option1.3"], key="option1")
color_selectbox(0, 'pink')

chosen2 = st.selectbox("Menu 2", ["Option2.1", "Option2.2", "Option2.3"], key="option2")
color_selectbox(1, 'yellow')
2 Likes