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

Question

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

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

我也尝试过使用

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 小部件的选择颜色，而不修改其他小部件的颜色。