Streamlit如何修改multiselect组件选中选项标签的默认橙色

解决方案 #

你之前的CSS仅命中了标签的中间文本容器，Streamlit底层基于BaseWeb框架实现的multiselect标签由左圆角、中间文本区、右圆角三个子元素组成，需要同时覆盖标签容器和所有子元素的背景色才能实现整体颜色修改。

完整CSS代码 #

/* 覆盖标签容器背景色 */
span[data-baseweb="tag"] {
  background-color: #272272 !important;
}
/* 覆盖标签所有子元素的默认背景色 */
span[data-baseweb="tag"] > span {
  background-color: #272272 !important;
}
/* 可选：修改标签关闭按钮颜色，适配深色背景 */
span[data-baseweb="tag"] [aria-label="clear"] svg {
  fill: #ffffff !important;
}

Streamlit 中使用示例 #

将上述CSS通过st.markdown注入到页面中即可生效：

import streamlit as st

# 注入自定义样式
st.markdown("""
<style>
span[data-baseweb="tag"] {
  background-color: #272272 !important;
}
span[data-baseweb="tag"] > span {
  background-color: #272272 !important;
}
span[data-baseweb="tag"] [aria-label="clear"] svg {
  fill: #ffffff !important;
}
</style>
""", unsafe_allow_html=True)

# 测试组件
st.multiselect(
    "测试多选组件",
    ["选项A", "选项B", "选项C", "选项D"],
    default=["选项A"]
)

注意：必须设置unsafe_allow_html=True参数，自定义CSS才会被页面识别生效。

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