Streamlit：如何检测CSS样式按钮的点击状态？

你用纯HTML渲染的按钮没法直接和Streamlit的Python逻辑交互——因为Streamlit的交互依赖自身的组件机制，普通HTML元素不会触发框架的重渲染或状态更新。下面给你两个可行的解决办法：

方案1：给原生Streamlit按钮加CSS样式（推荐） #

直接用Streamlit自带的st.button，再通过CSS覆盖它的默认样式，这样既能保留原生的点击检测、禁用状态支持，又能实现你想要的外观：

enabled = True

# 注入自定义CSS
st.markdown("""
    <style>
    /* 定位Streamlit原生按钮 */
    div.stButton > button:first-child {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
    }
    div.stButton > button:first-child:hover {
        opacity: 0.6;
    }
    /* 禁用状态样式 */
    div.stButton > button:first-child:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    </style>
""", unsafe_allow_html=True)

# 原生按钮，支持点击事件和禁用控制
if st.button("Run!", disabled=not enabled):
    # 这里写按钮点击后的业务逻辑
    st.success("按钮被触发了！")

这个方案的优势是零额外复杂度，完全贴合Streamlit的交互逻辑，稳定性最高。

方案2：HTML按钮结合JavaScript+Session State（特殊场景用） #

如果你必须使用纯HTML按钮，可以通过JavaScript监听点击事件，再把状态同步到Streamlit的session_state中，让Python端能读取到点击状态：

import streamlit as st

# 初始化session_state存储点击状态
if "custom_button_clicked" not in st.session_state:
    st.session_state.custom_button_clicked = False

enabled = True

# 渲染HTML按钮和交互逻辑
st.markdown(f"""
    <style>
    .custom-button {{
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
    }}
    .custom-button:hover {{
        opacity: 0.6;
    }}
    .disabled {{
        opacity: 0.6;
        cursor: not-allowed;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        width: 100%;
    }}
    </style>
    <button class="{'custom-button' if enabled else 'disabled'}" id="custom-run-btn" {'disabled' if not enabled else ''}>
        Run!
    </button>

    <script>
    const btn = document.getElementById('custom-run-btn');
    btn.addEventListener('click', () => {{
        // 向Streamlit发送状态更新
        window.parent.postMessage({{
            type: 'streamlit:setComponentValue',
            value: true,
            key: 'custom_button_clicked'
        }}, '*');
    }});
    </script>
""", unsafe_allow_html=True)

# Python端检测并处理点击事件
if st.session_state.custom_button_clicked:
    st.success("自定义按钮被点击了！")
    # 重置状态，避免页面重渲染时重复触发
    st.session_state.custom_button_clicked = False

注意：要给按钮加上disabled属性，确保禁用状态下无法点击；另外每次处理完点击后要重置session_state里的状态，防止逻辑重复执行。

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