首先右键打开审查元素 一开始审查元素只能看到背景色 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)