如何放大/加粗st.multiselect的标签？自定义CSS未生效求解决

问题描述 #

我想放大并加粗Streamlit中st.multiselect组件的标签，现有代码如下：

choice_mode = st.multiselect("Chose Mode", ['A','B','C'], default="*")

尝试添加自定义CSS代码后，CSS文本直接显示在应用中，样式并未生效：

st.markdown(".stTextInput > label {font-size:105%; font-weight:bold; color:blue;} ",unsafe_allow_html=True) #for all text-input label sections

st.markdown(".stMultiSelect > label {font-size:105%; font-weight:bold; color:blue;} ",unsafe_allow_html=True) #for all multi-select label sections

请问是操作有误还是与Streamlit版本有关？

解决方案 #

1. 修正CSS包裹方式 #

核心问题是未将CSS代码放在<style>标签内，导致Streamlit把它当成普通文本渲染。正确写法是将所有CSS规则包裹在<style>标签中，通过一次st.markdown注入：

# 注入自定义CSS样式
st.markdown("""
<style>
/* 针对文本输入框标签 */
.stTextInput > label {
    font-size: 105%;
    font-weight: bold;
    color: blue;
}
/* 针对多选框标签 */
.stMultiSelect > label {
    font-size: 105%;
    font-weight: bold;
    color: blue;
}
</style>
""", unsafe_allow_html=True)

# 渲染多选组件
choice_mode = st.multiselect("Chose Mode", ['A','B','C'], default="*")

2. 适配Streamlit版本的类名变化 #

Streamlit的组件类名可能随版本更新调整：

• 旧版本组件类名多为驼峰式（如stMultiSelect）
• 新版本（1.20+）可能改用短横线分隔的类名（如st-multiselect）

如果上述代码仍不生效，建议打开浏览器开发者工具（F12），选中多选组件的标签元素，查看其实际父类名，替换CSS中的选择器即可。

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