记一次修改streamlit按钮样式的方法_streamlit button

首先右键打开审查元素 一开始审查元素只能看到背景色 border(边框色)以及color(字体色) 那就再一次右击按钮 审查元素 来回切换1.2 也就是属性所在的标签

 好了 进入主题

懒人必知

我们对其css进行右键会出现很多个copy 第一个代表建和值 第二个代表建 第三个代表值 第四个代表属性加值

我是浏览器截图所以截图不了

下面陈列几个按钮点击属性

 a:link{color:#fff}  未访问时的状态（鼠标点击前显示的状态）
 a:hover{color:#fff}  鼠标悬停时的状态
 a:visited{color:#fff}  已访问过的状态（鼠标点击后的状态）
 a:active{color:#fff}  鼠标点击时的状态
 a:focus{color:#fff}  点击后鼠标移开保持鼠标点击时的状态[获得焦点]（只有在<a href="#"></a>时标签中有效）

我们对其进行修改对应样式就可以了

点击后的样式 点击后再去审查元素

#取消点击后的按钮的边框 以及禁用停留状态
focus{box-shadow:none;border-color:transparent};
#其他的就对应写就可以了

下面是我的写法 我发现还必须写在一个富文本里 及格的话貌似会渲染冲突

button_css = '''<style>
#root > div:nth-child(1) > div.withScreencast > div > div > div > section.main.css-1v3fvcr.egzxvld3 > div > div:nth-child(1) > div > div:nth-child(8) > div > button:focus{box-shadow:none;border-color:transparent};
</style>
<style>
#root > div:nth-child(1) > div.withScreencast > div > div > div > section.main.css-1v3fvcr.egzxvld3 > div > div:nth-child(1) > div > div:nth-child(8) > div > button{
  background-color:rgb(255 75 75);
  color: rgb(255 255 255);
  
};
</style>
<style>
#root > div:nth-child(1) > div.withScreencast > div > div > div > section.main.css-1v3fvcr.egzxvld3 > div > div:nth-child(1) > div > div:nth-child(8) > div > button:active{background-color:rgb(231 105 105);
barder-color:rgb(231 105 105);
color:rgb(2 2 2);
  
};
</style>'''
st.markdown(button_css,unsafe_allow_html=True)