Streamlit：更改多选小部件的颜色

Question

我一直在尝试更改多选小部件的颜色，特别是选择的颜色（橙色），看起来像这样

但没有任何成功。我在这里Streamlit: modify the multiselect tag background color 找到了一个讨论，它改变了多选小部件的所有元素的颜色，除了选择“框”。有人知道如何“覆盖”默认颜色值吗？

我也尝试过使用

span[data-baseweb="tag"]>span:first-child {background-color:#272272 !important;}

但它只会像这样改变橙色选择的中间部分：

Answer 1

我看到了 3 种做你想做的事的方法。第 3 种方式完全符合您的要求，但比第 2 种方式更 hacky。

---

.streamlit/config.toml 主题化

通过配置文件使用主题选项。您可以在 Streamlit docs 中查看有关主题的更多详细信息。

修改~/.streamlit/config.toml 以包括：

[theme]
primaryColor="blue"

然后，打开您的 Streamlit 应用，点击右上角的汉堡菜单，然后点击“设置”>“主题”并选择“自定义主题”。

import streamlit as st

st.multiselect("Something", ["something1", "something2", "something3"])

st.checkbox("Enable autotune")

name = st.text_input("Enter your name")
st.markdown("Hello, {}!".format(name))

缺点是它会修改所有其他小部件颜色：

---

通过 Streamlit 界面进行主题化

与第一个命题相同的另一种方法是单击与第一个命题相同的菜单中的“编辑活动主题”。

---

通过st.markdown 使用 css 注入修改 css

最后一种方法是通过markdown修改样式：

import streamlit as st

st.markdown(
    """
<style>
span[data-baseweb="tag"] {
  background-color: blue !important;
}
</style>
""",
    unsafe_allow_html=True,
)

st.multiselect("Something", ["something1", "something2", "something3"])

这个只修改st.multiselect小部件的选择颜色，而不是其他小部件的颜色。