Streamlit：修改多选标签背景颜色

Posted 2023-03-29

【中文标题】Streamlit：修改多选标签背景颜色

【英文标题】：Streamlit: modify the multiselect tag background color

【发布时间】：2021-11-10 14:54:58

【问题描述】：

我已经使用streamlit 有一段时间了，但仍然不知道如何更改multiselect 标记的背景颜色。有什么办法可以解决这个属性吗？

我尝试过检查元素，但没有发现任何可改进的地方。

/* change the select box properties */
div[data-baseweb="select"]>div 
  background-color:#fff;
  border-color:rgb(194, 189, 189);
  width: 50%;


/* change the tag font properties */
span[data-baseweb="tag"]>span 
  color: black;
  font-size: 17px;
 /* background-color:#fff; */   /* only turns part of the tag white */

【参考方案1】：

要修改多选的视觉效果，您可以：

import streamlit as st

st.markdown("""
<style>
/* The input itself */
div[data-baseweb="select"] > div 
  background-color: yellow !important;
  font-size: 23px !important;


/* The list of choices */
li>span 
  color: red !important;
  font-size: 35px;
  background-color: blue !important;


li 
  background-color: green !important;

</style>
""", unsafe_allow_html=True)

st.multiselect("foo", ["aaaaaa", "bbee ", "opeen Jej"])