Streamlit如何修改multiselect组件的标签背景颜色

核心原因 #

你之前仅修改了标签内层的文字span元素，未覆盖外层标签容器和右侧删除按钮区域的背景样式，才会出现仅部分标签变白的问题。 #

完整实现代码 #

直接在你的Streamlit脚本中插入以下代码即可生效：

import streamlit as st

# 注入自定义CSS
st.markdown("""
<style>
/* 调整多选框整体样式（保留你原有配置） */
div[data-baseweb="select"]>div {
  background-color:#fff;
  border-color:rgb(194, 189, 189);
  width: 50%;
}

/* 标签外层容器样式 */
span[data-baseweb="tag"] {
  background-color: #fff !important; /* 可替换为任意你需要的背景色 */
  border: 1px solid rgb(194, 189, 189) !important; /* 不需要标签边框可删除该行 */
}

/* 标签文字样式（保留你原有配置） */
span[data-baseweb="tag"]>span {
  color: black;
  font-size: 17px;
  background-color: transparent !important;
}

/* 标签右侧删除按钮区域样式 */
span[data-baseweb="tag"] button {
  background-color: #fff !important; /* 和标签背景色保持一致 */
}

/* 可选：调整删除按钮图标颜色 */
span[data-baseweb="tag"] svg {
  fill: #666;
}
</style>
""", unsafe_allow_html=True)

# 测试用多选组件
options = ["选项1", "选项2", "选项3", "选项4"]
selected = st.multiselect("测试多选框", options)

注意事项 #

• 所有样式后加!important是为了强制覆盖Streamlit优先级更高的默认样式，避免失效
• 直接修改background-color的色值即可调整为你需要的任意背景色
• 如果需要调整hover、选中状态的标签样式，额外添加对应伪类选择器即可，比如span[data-baseweb="tag"]:hover

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