在微信小程序的开发过程中,小伙伴们都会经常的使用button按钮,但是我们要怎么样去除它们的默认样式呢。因为最近有了解到这个,所以就跟大家伙说一下。
一、去除button的边线:因为button的边框样式是通过::after方式实现的,所以我们在这里要使用::after 伪类选择器。如果在button上定义边框就会出现两条边框线的话,我们就可以使用::after的方式去覆盖默认值。
1、wxml页面
<view>
<button>我是按钮</button>
</view>
2、wxml页面
button::after {
border: none;
}
这样的话,我们就成功去除了button的边线
二、去除button点击时的默认背景色
默认背景色为.button-hover样式渲染,一般来说都是灰色,我们需要重新定义一个颜色把默认的背景颜色覆盖就可以了
.button-hover{
background: yellow;
}