Streamlit Multiselect组件：实现选中元素与原选项颜色匹配

问题根源在于你当前的CSS仅针对下拉弹窗内的选项设置了背景色，但选中后显示在组件顶部的标签是独立的DOM元素，并未被原有样式覆盖。

解决方案 #

通过定位选中标签的data-testid属性，并结合文本内容匹配，为每个选项的选中标签设置对应背景色：

import streamlit as st

# 自定义样式
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;
}

/* 选中后顶部标签的背景色 */
div[data-testid="stMultiSelectValue"]:has(span:contains("option1")) {
    background-color: red !important;
    color: white; /* 可选：设置文字颜色提升可读性 */
}
div[data-testid="stMultiSelectValue"]:has(span:contains("option2")) {
    background-color: blue !important;
    color: white; /* 可选：设置文字颜色提升可读性 */
}
</style>
""",
    unsafe_allow_html=True,
)

# 多选框组件
st.multiselect("Options", ["option1", "option2", "option3"])

关键说明 #

• div[data-testid="stMultiSelectValue"]是Streamlit为选中标签分配的稳定测试ID，用于精准定位元素
• :has(span:contains("optionX"))通过标签内的文本内容匹配对应选项，确保每个选中标签的背景色与原选项一致
• !important用于覆盖Streamlit默认的选中标签样式优先级

内容的提问来源于stack exchange，提问作者Quinten