如何在Streamlit中以鲁棒且版本无关的方式自定义按钮点击样式

背景说明 #

Streamlit 自动生成的按钮类名（如示例中的css-4eonon、edgvbvh1）是构建时生成的哈希值，会随版本迭代、配置修改发生变化，直接用这些类名定位完全没有鲁棒性，官方也没有开放自定义类名的接口，因此需要用自主可控的标识来做定位。

最优实现方案（完全不受版本影响） #

操作步骤 #

• 首先在需要自定义的目标按钮前，插入一段带唯一ID的隐藏HTML标记，不会在页面产生任何可见内容，也不影响原有交互

# 自定义唯一ID，不同按钮设置不同值即可
st.markdown('<span id="target-calendar-btn" style="display:none"></span>', unsafe_allow_html=True)
# 原有按钮创建逻辑不用改
calendar_btn = st.button("📆")

• 之后注入自定义CSS，通过ID+相邻兄弟选择器+官方固定测试属性精准定位按钮，你要的点击态、hover态都可以自定义

st.markdown("""
<style>
/* 定位目标按钮：自定义ID后第一个stButton容器内的按钮 */
#target-calendar-btn + div[data-testid="stButton"] button {
    /* 自定义默认样式示例 */
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
}
/* 自定义点击态样式 */
#target-calendar-btn + div[data-testid="stButton"] button:active {
    background-color: #165DFF;
    color: #fff;
    transform: scale(0.97);
    box-shadow: none;
}
/* 可按需添加hover、focus等其他状态的样式 */
#target-calendar-btn + div[data-testid="stButton"] button:hover {
    background-color: #4080FF;
}
</style>
""", unsafe_allow_html=True)

方案优势 #

• 100%不受Streamlit版本更迭影响：用到的data-testid是Streamlit官方为测试预留的固定属性，不会修改；自定义ID完全由你自己控制
• 定位绝对精准：每个按钮对应唯一ID，不会和页面其他按钮冲突
• 改造成本极低：原有按钮的业务代码不需要任何修改，只需要加一行隐藏标记和CSS即可

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